jQueryのhtml()で改行したい

XSS防止のため下記のように記述しています。


text = 'こんにちは世界。こんばんは世界。';

$('#hoge').text(text).html();

「こんにちは世界。」と「こんばんは世界。」の間に改行を入れたい場合はどのように記述したらよいでしょうか？
単純にhtml()だけ使用する場合は</br>などのHTMLタグが認識されるので、改行できると
思うのですが、上記の様なケースで改行をする方法がわかりません。
初歩的な質問で申し訳ないのですが、どなたかご教示いただけますと幸いです。

m.ts10806

2018/07/07 07:03

その変数textはユーザーからの入力によってやってくるものという認識で良いですか？改行したい箇所に何かしらの規則性はあるのでしょうか？

syoshinsya

2018/07/07 07:46 編集

変数textの中身は一部ユーザー固有の情報が入りますが、その他は固定文言( ユーザー固有情報変数 + '固定文言。' 改行)となります。改行したい箇所は文の終わり（。）で改行したいと思っています。

m.ts10806

2018/07/07 07:50

”「こんにちは」と「世界」の間に改行を入れたい”というのと要件が合致していないように思います。もう少し整理して質問本文を更新していただければと思います。

syoshinsya

2018/07/07 08:01

紛らわしい返信申し訳ありません。ユーザー固有情報というのも文字列ですので、本文にある通り「こんにちは」と「世界」の間に改行を入れたい。本文のエスケープ記法で表示する固定文字列の任意の箇所に改行を入れる方法を知りたい。という質問内容です。

syoshinsya

2018/07/07 08:07

本文を修正いたしました。変数textの中身は固定文言です。よろしくお願いいたします。

think49

2018/07/07 08:51 編集

「エスケープ記法」というので、セレクタのエスケープシーケンスを連想しましたが、エスケープではないですね。表題で誤解を招くので「エスケープ」の文言は削除した方が良いと思います。

think49

2018/07/07 09:13

<div id="hoge">こんにちは世界。<br />こんばんは世界。</div> の見た目でHTML出力する要件と思っていましたが、コンソール出力される文字列に改行を入れたいだけだったりしますか。その場合はconsole.log(text.replace(/。/g, '\r\n')); で解決しますが。「どこで」改行があるように見せたいのかを明示して下さい。

行動規範の内容に同意します

回答2件

ベストアンサー

こういう事でしょうか。

JavaScript
1var text = 'こんにちは世界。こんばんは世界。';
2$( '#hoge' ).html( $('<div>').text( text ).html().replace( '。', '。<br>' ) );
3```**動くサンプル：**[https://jsfiddle.net/rnyhjefb/](https://jsfiddle.net/rnyhjefb/)

投稿2018/07/07 08:53

kei344

総合スコア69625

think49

2018/07/07 09:07 編集

> $( '#hoge' ).html( $('<div>').text( text ).html().replace( '。', '。<br>' ) ); .text() を経由していますが、初めから .html() を使っても結果が変わらないように読めます。 (質問者さんの .html() ではないことを強調する理由も不明なので、回答しづらいところはありますが…。)

kei344

2018/07/07 11:24

なんとなくですが、text にはHTML要素（<img>とか）が入る可能性があって、それをHTMLとしてでなく文字列で表現したいのではないだろうか、という予想です。

think49

2018/07/07 11:49

なるほど、HTMLエスケープする想定なのですね。

行動規範の内容に同意します

white-space

単純にhtml()だけ使用する場合は</br>などのHTMLタグが認識されるので、改行できると
思うのですが、上記の様なケースで改行をする方法がわかりません。

white-space - CSS: カスケーディングスタイルシート | MDN

HTML
1<style>
2#hoge {
3  white-space: pre-line;
4}
5</style>
6</head>
7<body>
8<div id="hoge"></div>
9<script>
10'use strict';
11{
12  const text = 'こんにちは世界。こんばんは世界。';
13
14  jQuery('#hoge').text(text.replace(/。(?!$)/g, '$&\r\n'));
15}
16</script>

DocumentFragment

しかし、jQuery#text() に拘る理由が質問文からは読み取れません。
DocumentFragment や jQuery オブジェクトを使用して、br要素ノードを含む疑似配列を jQuery#append() しても良いと思います。

HTML
1<div id="hoge"></div>
2<script>
3'use strict';
4{
5  const text = 'こんにちは世界。こんばんは世界。',
6        LineList = text.match(/[^。]*。|[^。]+$/g),
7        df = document.createDocumentFragment(),
8        br = document.createElement('br');
9
10  df.appendChild(document.createTextNode(LineList[0]));
11
12  for (let i = 1, len = LineList.length; i < len; ++i) {
13    df.appendChild(br.cloneNode(false));
14    df.appendChild(document.createTextNode(LineList[i]));
15  }
16
17  jQuery('#hoge').append(df);
18}
19</script>

jQueryオブジェクト

HTML
1<div id="hoge"></div>
2<script>
3'use strict';
4{
5  let text = 'こんにちは世界。こんばんは世界。',
6      LineList = text.match(/[^。]*。|[^。]+$/g),
7      jQueryObject = jQuery(document.createTextNode(LineList[0])),
8      br = document.createElement('br');
9
10  for (let i = 1, len = LineList.length; i < len; ++i) {
11    jQueryObject = jQueryObject.add(br.cloneNode(false));
12    jQueryObject = jQueryObject.add(document.createTextNode(LineList[i]));
13  }
14
15  jQuery('#hoge').append(jQueryObject);
16}
17</script>