JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで文字列を改行する方法

JavaScriptで文字列に改行を挿入するには？

JavaScriptで文字列を改行して表示したい場合は、HTMLの <br> タグを使用します。文字列同士を + 演算子で連結し、その間に <br> を挟むことで、ブラウザ上で改行された状態で表示されます。

サンプルコード

以下は、innerHTML プロパティと <br> タグを組み合わせて、見出し内のテキストを2行に分けて表示するコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
    <h1 id="headingDemo">
        My Name is David Miller
    </h1>
</body>
<script>
    document.getElementById("headingDemo").innerHTML = "My Favourite Subject is JavaScript" + '<br>' + "I live in AUS.";
</script>
</html>

上記のプログラムを実行するには、ファイルを「index.html」などの任意の名前で保存します。その後、VS Codeエディタでファイルを右クリックし、「Open with Live Server」を選択してください。

実行結果は以下のようになります。

JavaScriptで文字列を改行する方法

ポイント

  • <br> タグはHTMLにおける改行を表す要素です。
  • innerHTML は代入した文字列をHTMLとして解釈するため、<br> が正しく機能します。
  • textContent を使用すると、<br> がタグではなくそのまま文字列として表示されるため注意が必要です。
  • 改行位置は自由に指定でき、複数箇所に <br> を挿入することも可能です。
  1. C++を使ってOpenCVにトラックバーを追加する方法

    トラックバー（Trackbar）は、OpenCVでさまざまなパラメータを直感的に操作するためのスライダー型のUI部品です。トラックバーを活用すれば、ソースコード内の数値をその都度書き換えて再コンパイルする必要がなくなり、明るさやコントラストなどのパラメータをマウス操作だけでグラフィカルに調整できます。これにより、リアルタイムに変化を確認しながら動的な画像エフェクトを作成することが可能になります。 以下のプログラムは、C++を使ってOpenCVウィンドウにトラックバーを追加し、画像の明るさとコントラストを動的に変更する例です。 サンプルコード #include<iostream> #

  2. Windows・Mac・オンラインでGoogle Earthを録画する方法【完全ガイド】

    世界は思っているよりずっと小さいもの。なぜそう言えるのか、ご存じですか?世界中を旅することが夢なら、旅行チケットに何千円も何万円も費やす必要はないかもしれません。Google Earthのようなプラットフォームが、あなたの世界一周の憧れを叶えてくれるからです。場所を入力するだけで、その土地のバーチャルな絶景を楽しむことができます。もちろん、実際にその場所へ足を運ぶ体験には及びません。しかし、例えば近いうちに家族や友人と一緒に旅行に行く予定の場所を、事前にGoogle Earthでバーチャルツアーとして共有したいと思ったことはありませんか?そんなとき、Google Earthの動画はどうやって撮