問題 × 解決策

javascriptでテキストを一行ごとにulタグでリスト化するデモ

問題

テキストを一行ごとにulのリストに変換したい。

解決策

  1. テキストの改行コードを「\n」に統一し、splitで「\n」をキーにして一行ごとに配列化します。
  2. 配列内の空白行をスキップし、別の配列に移します。
  3. 変数を用意し、ul開始タグを代入 → 移した配列を回して値をliタグで囲って変数に追加 → ul閉じタグを変数に追加します。
  4. 変数を任意の場所で出力します。

 

原稿のテキストを一行ごとにリスト化

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

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

17 − 15 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧