JavaScript で br に改行-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

JavaScript で br に改行

PHPz

May 09, 2023 am 10:22 AM

JavaScript は、Web 開発で広く使用されているスクリプト言語です。実際の開発プロセスでは、データの表示が必要な場面に遭遇することがよくあります。データを表示するとき、データ内の改行を HTML   タグに変換する必要がある場合があります。この記事ではJavaScriptがどのように改行変換を行っているのかを紹介します。

1. 改行文字とは JavaScript で最も一般的な改行文字は ` です。実際、オペレーティングシステムでは、システムごとに異なる改行が使用されます。たとえば、Windows システムでは改行文字は ですが、Unix または Linux システムでは改行文字は ` です。この変動性のため、開発中に明確に考慮しないとエラーが発生する可能性があります。

2. JavaScript で改行を変換する方法 JavaScript では、正規表現を使用して改行を置き換えることができます。以下は簡単な関数の例です:

function formatString(str) {
  if(!str) return str;
  return str.replace(/
/g, "<br>");
}

上記の関数では、正規表現 ` を使用して改行文字を照合し、replace メソッドを使用して改行文字を HTML に置き換えます。鬼ごっこ＃＃＃＃＃＃＃＃＃。このうち、/g`はグローバルマッチングを表します。このように、関数を呼び出すときは、改行に変換する文字列を渡すだけで済みます。例は次のとおりです:

var str = "这是第一行
这是第二行
这是第三行";
var formattedStr = formatString(str);
console.log(formattedStr);

上記のコードを実行すると、コンソール出力は次のようになります:

这是第一行<br>这是第二行<br>这是第三行

3. 使用例

入力を複数の形式で表示する必要がある場合は、 Web ページコンテンツ上の行テキストボックスでは、改行を変換する必要があります。以下は簡単な Web ページの例です:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript で br に改行</title>
    <style>
      #content {
        width: 400px;
        height: 200px;
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <h1 id="JavaScript-で-br-に改行">JavaScript で br に改行</h1>
    <div>
      <textarea id="content"></textarea>
    </div>
    <input type="button" value="提交" onclick="submitContent()">
    <script>
      function formatString(str) {
        if(!str) return str;
        return str.replace(/
/g, "<br>");
      }
      function submitContent() {
        var content = document.getElementById("content").value;
        var formattedContent = formatString(content);
        console.log(formattedContent);
      }
    </script>
  </body>
</html>

上記の Web ページでは、テキストボックスと送信ボタンを使用します。ユーザーがテキストボックスにコンテンツを入力して送信ボタンをクリックすると、変換されたコンテンツが。結果は以下の図のようになります:

IV. 注意事項 JavaScript で br に改行改行を変換する際には以下の点に注意する必要があります。