JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでdiv内のカンマ区切りテキストを別々の行に変換する方法

例えば、以下のようなカンマ区切りのテキストがdiv要素内に含まれているとします。

<div class="commaSeparated">
This,is,the,first,JavaScript,program
</div>

このカンマ区切りのテキストを別々の行に変換するには、trim()とsplit(',')を組み合わせて使用します。まずtextContentプロパティでdiv内のテキストを取得し、trim()で前後の余分な空白を取り除きます。続いて、split()をカンマ「,」を区切り文字として呼び出すことで、文字列を配列へ分割できます。最後に、各要素をliタグで囲んだulリストとしてinnerHTMLに出力すれば、1項目ずつ別々の行として表示されます。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="commaSeparated">
This,is,the,first,JavaScript,program
</div>
</form>
<script>
    var allTheData = document.querySelector('.commaSeparated').textContent.trim().split(',')
    var separateList = '<ul>'
    allTheData.forEach(function(value) {
        separateList += '<li>' + value + '</li>';
    });
    separateList += '</ul>';
    document.querySelector(".commaSeparated").innerHTML = separateList;
</script>
</body>
</html>

プログラムの実行手順

上記のプログラムを実行するには、コードを「anyName.html」などの任意の名前で保存します。次に、VS Codeエディタで保存したファイルを右クリックし、メニューから「Open with Live Server」を選択してください。Live Serverによってブラウザでページが開き、変換結果をすぐに確認できます。

出力結果

上記のプログラムを実行すると、次のような出力が得られます。

JavaScriptでdiv内のカンマ区切りテキストを別々の行に変換する方法

  1. JavaScriptでリンクのアンカーテキストの先頭1文字を削除する方法

    JavaScriptでリンクのアンカーテキストの先頭文字を削除するには？ ここでは、アンカーテキストに余分な文字が含まれてしまっている「Aabout_us」と「Hhome_page」の2つのリンクを例に解説します。 このような場合、JavaScriptのsubstring(1)メソッドとinnerHTMLプロパティを組み合わせることで、先頭の1文字を取り除き、「about_us」「home_page」という正しい表記で表示させることができます。 substring(1)は文字列のインデックス1（2番目の文字）以降を抽出するメソッドです。これにより先頭の不要な文字だけを簡単に削除できます。 コー

  2. JavaScriptでdiv要素のスクリーンショットを撮る方法!html2canvasの使い方を徹底解説

    Web開発において、サイトのレイアウトを構成するHTML要素の一部を画像としてキャプチャし、その画像を保存したり別の用途に活用したいというニーズはよくあります。本記事では、JavaScriptを使ってdiv要素などをスクリーンショットとして撮影する方法を解説します。 html2canvasライブラリを使う 今回の要件はcanvas要素だけでなく、任意のHTML要素をキャプチャ対象とする点がポイントです。CSSによる描画結果を自力で再現しようとすると実装が非常に複雑になるため、ここではサードパーティ製ライブラリのhtml2canvasを利用します。 html2canvasは、その名の通り指定した