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

JavaScriptでHTMLのdiv要素内のテキストを一括置換する方法

Webページ上の複数の要素に対して、特定のテキストをまとめて差し替えたいケースはよくあります。たとえば、見出し（h2タグなど）に入っている文字列を、ページ内のすべてのspan要素に反映させたい場合などが該当します。

このような処理を実現するには、document.querySelectorAll() を使用します。あわせて getElementsByClassName() を組み合わせることで、クラス名を指定して対象のテキストを取得できます。

実装のポイント

  • document.querySelectorAll('.my-main-div-class span') で、親要素（div）の中にあるすべてのspan要素をNodeListとして取得します。
  • document.getElementsByClassName('uniqueId')[0].textContent で、指定したクラスを持つ見出しのテキスト内容を取得します。
  • for...of ループを使って、取得したすべてのspan要素の textContent を書き換えます。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=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>
<h2 class="uniqueId"> My Name is John </h2>
<div class="my-main-div-class">
<div class="div-class-2">
<span>ここにh2の値が入ります...</span>
</div>
<div class="div-class-end">
<span>ここにh2の値が入ります...</span>
<span>ここにh2の値が入ります...</span>
</div>
</div>
<script>
   const allSpan = document.querySelectorAll('.my-main-div-class span'),
   replaceAboveText =
   document.getElementsByClassName('uniqueId')[0].textContent;
   for (var newElement of allSpan){
      newElement.textContent = replaceAboveText
   }
</script>
</body>
</html>

このコードでは、まず querySelectorAll() によって .my-main-div-class 内の全span要素を取得し、次に getElementsByClassName('uniqueId')[0].textContent で見出し「My Name is John」というテキストを取り出しています。最後にループ処理で、すべてのspan要素のテキストを見出しの文字列で上書きしています。

プログラムの実行方法

上記のプログラムを実行するには、ファイル名を「anyName.html」（例：index.html）として保存し、そのファイルを右クリックしてください。VS Codeエディターを使用している場合は、「Open with Live Server」オプションを選択すると、ブラウザ上で結果をすぐに確認できます。

出力結果

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

JavaScriptでHTMLのdiv要素内のテキストを一括置換する方法

実行後は、div要素内にあった元のプレースホルダーテキストがすべて「My Name is John」に置き換わり、見出しと同じ内容が各span要素に表示されます。

  1. JavaScriptでIDを指定して要素を削除する方法

    JavaScriptでIDを指定して要素を削除するIDを使ってHTML要素を削除するには、remove()メソッドを使用します。このメソッドは、対象のDOM要素をドキュメントから直接取り除くことができる、最もシンプルで直感的な方法です。コード例以下は実際のサンプルコードです。<!DOCTYPE html> <html lang=ja> <head>    <meta charset=UTF-8>    <meta name=viewport content=width=device-width, in

  2. JavaScriptでHTMLテーブルの全要素にIF条件を適用する方法

    HTMLテーブル内のすべての要素にIF条件（条件分岐）を適用したい場合は、document.querySelectorAll()とforEach()を組み合わせることで簡単に実現できます。querySelectorAll()で対象の要素をまとめて取得し、forEach()で1つずつループ処理を行いながら、各要素に対して条件判定を実行します。サンプルコード以下がそのコード例です。<!DOCTYPE html> <html lang="ja"> <head>    <meta charset="UTF-8&