-
ID:S1WNTr さんの質問

jQueryに関しての質問です。(初心者です)

サイト上でtextareaに入力した文字列を、改行を認識して各liに入れたいのですがどういった処理が必要でしょうか?
ただvalueを取得して入れると改行が取れて一列になってしまいます。

■例
textareaに改行込で、以下テキストを入力。

AAA
BBB
CCC

↓↓↓変換↓↓↓

<li>AAA</li>
<li>BBB</li>
<li>CCC</li>

いい方法があればご教示いただけると助かります。
よろしくお願いいたします。

みんなの回答 1 件

ID:hSV3oi さんの回答

正規表現一発だね

ID:S1WNTr

なるほど。
やはり正規表現を使う必要があるんですね。
改行を一度<br>にするとかですかね?
差し支えなければ処理の手順を簡単でいいので教えてはいただけないでしょうか?

ID:S1WNTr

以下記述で対応できました!
ありがとうございます!

$(function(){
var btn = $(’#btn’);

btn.on(’click’,function(){
var test = $(’#test’),
val = $(’#text’).val(),
br = val.replace(/\r\n|\r/g, "\n"),
line = br.split(’\n’);

test.find(’li’).empty();
for (var i = 0; i <= 10; i++){
test.find(’li’).eq(i).append(line[i]);
}
});
});

ID:FBpqDQ

1. 改行を</li><li>に置換
2. 置換した結果の最初と最後に<li>と</li>を追加
3. 2.の結果をul.html()として代入
.
どれくらいの行数があるのか分からないけど、たぶん、こうやった方がパフォーマンス上がるよ。分かりやすく言うと、forで処理してるところでパフォーマンス落としてる。

ID:fVtTI7

↑その方法でもいいけどXSSには気をつけてね

ID:FBpqDQ

あー、そうだね、textareaっていうことは、ユーザー入力を前提にしてるってことうっかりしてたわ。html化する前にhtml/scriptタグを無効化する処理が必要になるね。

ID:hSV3oi

正規表現で一発って言ってんのに、何行書いてんだよ

ID:S1WNTr

色々調べてかなりコード削れた気がしたんですけど…

最終更新日:2016-06-09 (2,263 views)

関連するトピックス

ページ上部に戻る