web-dev-qa-db-ja.com

element.textContentに新しい行/キャリッジリターンを挿入するにはどうすればよいですか？

それは聞こえるかもしれないが、私はまだ適切な答えを見つけていません。

新しいDOM要素を動的に作成し、そのtextContent/innerTextをJS文字列リテラルで埋めたいとしましょう。
文字列が非常に長いので、3つのチャンクに分割します。

var h1 = document.createElement("h1");

h1.textContent = "This is a very long string and I would like to insert a carriage return HERE...
moreover, I would like to insert another carriage return HERE... 
so this text will display in a new line";

問題は、私が書いたら

h1.textContent = "...I would like to insert a carriage return here... \n";

おそらくブラウザが '\ n'を純粋なテキストと見なし、そのように表示するために動作しません（\ rも動作しません）。

一方、textContentの代わりにh1.innerHTMLを変更して、次のように書くことができます。

h1.innerHTML = "...I would like to insert a carriage return here...<br />";

ここでは<br />が仕事をしますが、そうすることで、テキストコンテンツだけでなく、私のh1のすべてのHTMLコンテンツが置き換えられます。

私の問題を解決する簡単な方法はありますか？
テキストを異なる行に配置するためだけに、複数のブロック要素を作成することはしません。
どんなアイデアでも大歓迎です。
前もって感謝します。

javascriptstringescapingcarriage-return
50
user1236489

私はずっと前にこの質問を投稿したことを知っています。

数日前に同様の問題があり、Webサービスから値をjson形式で渡し、tablecellcontentTextに配置しました。

値は"text row1\r\ntext row2"などの形式で渡されるためです。

textContentの新しい行については、\r\nを使用する必要があり、最後にcss white-space: pre-line;（必要に応じてテキストが折り返され、改行時に改行されます）を使用する必要があります。

または、white-space: pre;のみを使用でき、テキストは改行でのみ折り返されます（この場合は\r\n）。

したがって、改行でのみテキストを折り返すことでそれを解決する方法の例があります：

var h1 = document.createElement("h1");

//setting this css style solving problem with new line in textContent
h1.setAttribute('style', 'white-space: pre;');

//add \r\n in text everywhere You want for line-break (new line)
h1.textContent = "This is a very long string and I would like to insert a carriage return \r\n...";
h1.textContent += "moreover, I would like to insert another carriage return \r\n...";
h1.textContent += "so this text will display in a new line";

document.body.appendChild(h1);
82
nelek

私は少し前にこれに遭遇しました。キャリッジリターン（CODE 13）のASCII表現を使用するのが良い解決策であることがわかりました。 JavaScriptには、ASCIIコードの文字列バージョン、またはコンマで区切られた複数のコードを生成するString.fromCharCode()という便利な機能があります。私の場合、長い文字列からCSVファイルを生成し、テキスト領域に書き込む必要がありました。テキスト領域からテキストを切り取り、メモ帳に保存できるようにする必要がありました。 <br />メソッドを使用しようとすると、キャリッジリターンは保持されませんが、fromCharCodeメソッドを使用すると、リターンが保持されます。以下の私のコードを参照してください：

h1.innerHTML += "...I would like to insert a carriage return here..." + String.fromCharCode(13);
h1.innerHTML += "Ant the other line here..." + String.fromCharCode(13);
h1.innerHTML += "And so on..." + String.fromCharCode(13);
h1.innerHTML += "This prints hello: " + String.fromCharCode(72,69,76,76,79);

このメソッドの詳細については、こちらを参照してください： w3Schools-fromCharCode（）

ASCIIコードについては、こちらをご覧ください： ASCII Codes

31
JBausmer

正規表現を使用して、「\ n」または「\ n\r」の文字を「<br />」に置き換えることができます。

あなたはこれを持っています：

var h1 = document.createElement("h1");

h1.textContent = "This is a very long string and I would like to insert a carriage return HERE...
moreover, I would like to insert another carriage return HERE... 
so this text will display in a new line";

次のようにキャラクターを置き換えることができます：

h1.innerHTML = h1.innerHTML.replace(/\n\r?/g, '<br />');

stringおよびRegexオブジェクトのJavaScriptリファレンスを確認します。

http://www.w3schools.com/jsref/jsref_replace.asp

http://www.w3schools.com/jsref/jsref_obj_regexp.asp

5
Rodrigo

文字列を連結できます...

h1.innerHTML += "...I would like to insert a carriage return here...<br />";
h1.innerHTML += "Ant the other line here... <br />";
h1.innerHTML += "And so on...<br />";

jsFiddle。

4
Icarus

element.innerHTML="some \\\\n some";を使用します。

3
martin

上記の解決策はどれも私にとってはうまくいきませんでした。 <p>要素に改行と追加のテキストを追加しようとしていました。通常Firefoxを使用しますが、ブラウザーの互換性が必要です。 FirefoxのみがtextContentプロパティをサポートし、Internet ExplorerのみがinnerTextプロパティをサポートしていますが、両方ともinnerHTMLプロパティをサポートしていると読みました。ただし、<br />も\nも\r\nをこれらのプロパティに追加しても、新しい行は作成されませんでした。ただし、以下は機能しました。

<html>
<body>
<script type="text/javascript">
  function modifyParagraph() {

  var p;
  p=document.getElementById("paragraphID");
  p.appendChild(document.createElement("br"));
  p.appendChild(document.createTextNode("Additional text."));
}    
</script>

<p id="paragraphID">Original text.</p>

<input type="button" id="pbutton" value="Modify Paragraph" onClick="modifyParagraph()" />
</body>
</html>
2
Slogmeister Extraordinaire

\\nの挿入が機能することがわかりました。つまり、エスケープされた改行文字をエスケープします

2
Elendurwen

次のコードはうまく機能します（FireFox、IEおよびChrome）：

var display_out = "This is line 1" + "<br>" + "This is line 2";

document.getElementById("demo").innerHTML = display_out;
0
Apprentice

nelekの答えはこれまでに投稿された最高の答えですが、css値：white-space：preの設定に依存しています。

私は別の解決策を提供したいと思います。それはここで尋ねられるべき本当の質問に取り組むことを試みます：

「信頼できないテキストをDOM要素に挿入する方法は？」

テキストを信頼するなら、なぜ単にinnerHTMLを使用しないのですか？

domElement.innerHTML = trustedText.replace(/\r/g, '').replace(/\n/g, '<br>');

すべての合理的な場合に十分なはずです。

.innerHTMLの代わりに.textContentを使用することを決定した場合、挿入しようとしているテキストを信頼しないことを意味しますか？これは合理的な懸念事項です。

たとえば、ユーザーが投稿を作成できるフォームがあり、投稿後に投稿テキストがデータベースに保存され、他のユーザーが関連するページにアクセスするたびにページに追加されます。

ここでinnerHTMLを使用すると、セキュリティ違反が発生します。つまり、ユーザーは次のようなものを投稿できます

[script]alert(1);[/script]

（[]が<>であると想像してみてください。明らかに、スタックオーバーフローは安全でない方法でテキストを追加しています！）

innerHTMLを使用してもアラートはトリガーされませんが、innerHTMLを使用すると問題が発生する理由がわかります。より賢いユーザーが投稿します

[img src="invalid_src" onerror="alert(1)"]

ページにアクセスする他のすべてのユーザーに対してアラートをトリガーします。今、問題があります。さらに賢いユーザーは、そのimgスタイルには何も表示せず、現在のユーザーのCookieをクロスドメインサイトにポストします。おめでとうございます、すべてのユーザーのログイン情報がインターネットに公開されました。

したがって、理解すべき重要なことは、innerHTMLの使用は間違いではなく、独自の信頼できる開発者コードのみを使用してテンプレートを作成するために使用する場合に最適です。本当の質問は、「HTMLドキュメントに改行を含む信頼できないユーザーテキストをどのように追加するか」であるはずです。

これは疑問を提起します：どの戦略を改行に使用しますか？ [br]要素を使用しますか？ [p] sまたは[div] s？

問題を解決する短い関数を次に示します。

function insertUntrustedText(domElement, untrustedText, newlineStrategy) {
    domElement.innerHTML = '';
    var lines = untrustedText.replace(/\r/g, '').split('\n');
    var linesLength = lines.length;
    if(newlineStrategy === 'br') {
        for(var i = 0; i < linesLength; i++) {
            domElement.appendChild(document.createTextNode(lines[i]));
            domElement.appendChild(document.createElement('br'));
        }
    }
    else {
        for(var i = 0; i < linesLength; i++) {
            var lineElement = document.createElement(newlineStrategy);
            lineElement.textContent = lines[i];
            domElement.appendChild(lineElement);
        }
    }
}

これは基本的にcommon_functions.jsファイルのどこかに投げて、ユーザー/ api/etc->信頼できないテキスト（つまり、自分の開発者ではないチーム）を追加する必要があるときはいつでも発射して忘れることができますhtmlページ。

使用例：

insertUntrustedText(document.querySelector('.myTextParent'), 'line1\nline2\r\nline3', 'br');

パラメータnewlineStrategyは有効なdom要素タグのみを受け入れるため、[br]改行が必要な場合は 'br'を、[p]要素の各行が必要な場合は 'p'などを渡します。

0
Aqo