問題
テキストを一行ごとにulのリストに変換したい。
解決策
- テキストの改行コードを「\n」に統一し、splitで「\n」をキーにして一行ごとに配列化します。
- 配列内の空白行をスキップし、別の配列に移します。
- 変数を用意し、ul開始タグを代入 → 移した配列を回して値をliタグで囲って変数に追加 → ul閉じタグを変数に追加します。
- 変数を任意の場所で出力します。
原稿のテキストを一行ごとにリスト化
word等での何十行もある原稿のテキストを一行ごとにulタグでリスト化する必要がある時、一つ一つ囲っていくのはあまりに大変です。
そこでjavascriptでテキストを一行ごとにulタグでリスト化するデモをご紹介します。
DEMOはこちら
HTMLはこちら
<div class="ba-box clearfix">
<div class="before-box">
<h4 class="title-mark"><label for="override">ここにテキストを貼り付けてください。</label></h4>
<textarea id="override" class="override" name="override" rows="10"></textarea>
</div>
<div class="after-box">
<h4 class="title-mark type02"><label for="outputhtml">ここにulのリストのhtmlが表示されます。</label></h4>
<textarea id="outputhtml" class="outputhtml" name="outputhtml" rows="10" readonly></textarea>
</div>
</div>javascriptの記述例はこちら
$("textarea.override").change(function() {
var text = $(this).val().replace(/\r\n|\r/g, "\n");
var lines = text.split( '\n' );
var overrideArray = new Array();
for ( var i = 0; i < lines.length; i++ ) {
// 空行は無視する
if ( lines[i] == '' ) {
continue;
}
overrideArray.push( lines[i] );
}
if( overrideArray.length ){
var overridehtml = "";
overridehtml = overridehtml + '<ul>\n';
for ( var i = 0; i < overrideArray.length; i++ ) {
overridehtml = overridehtml + '<li>' + overrideArray[i] + '</li>\n';
}
overridehtml = overridehtml + '</ul>';
$("textarea.outputhtml").val( overridehtml );
}
})ポイント!
- 「replace(/\r\n|\r/g, “\n”)」で改行コードを「\n」に統一します。
- 「split( ‘\n’ )」で一行ごとに配列化します。
- 配列をfor文で回し、「lines[i] == ”」で空白ならスキップさせつつ、「overrideArray.push( lines[i] )」で別の配列へ値を移していきます。
- 変数（例としてoverridehtml）を用意し、「overridehtml = overridehtml + ‘<ul>’ + ‘\n’」でulの開始タグを変数に追加します。
- 先ほど移した配列を回し、「overridehtml = overridehtml + ‘<li>’ + overrideArray[i] + ‘</li>\n’」でliタグで値を囲います。
- 最後に「overridehtml = overridehtml + ‘</ul>’」でulの閉じタグを変数に追加します。
- 後は変数「overridehtml」を出力させれば完了です。
参考ページ
以下のサイトが、より詳しく解説してくれています。
【[JavaScript]textareaを1行づつ処理する】
http://nanoappli.com/blog/archives/655
コメント