タグも含まれるJavaScriptの .outerHTML とループを使って、複数要素のタグと文字列を書き換えます。
ループで一気に書き換えます。
ぜひ最後までご覧いただけたら嬉しいです。
.outerHTML
JavaScriptの .outerHTML は、その要素と中身のHTMLを取得・変更するプロパティです。
const content = element.outerHTML;同じようなプロパティで .innerHTML の場合は、中の文字列を取り囲む<p>と</p> などのタグは含まれませんが、.outerHTML の場合はこれを含みます。
タグと文字列を置換するサンプル
早速サンプルですが、以下に6つの p タグで並んだブロックがあります。
このブロックの一番下にある「タグと文字の置換」ボタンをクリックすると、6つの p タグの要素が全て h2 タグに置き換わり、中の文字列も変更されます。
段落（p）タグ1
段落（p）タグ2
段落（p）タグ3
段落（p）タグ4
段落（p）タグ5
段落（p）タグ6
ボタンクリックは1回のみに制限しているので、もう1回置換をさせたい場合は、ブラウザを更新してください。
置換される前・された後のHTML
上述のサンプルでは、見た目も切り替わるので一目瞭然ですが、コードの動きも理解できるようHTMLの置換前後も記載しておきます。
こちらは「置換前」のHTMLで、「ptagBlock」の名前が付いた div タグの子要素に p タグが6つ並んでいる形です。
<div class="ptagBlock">
<p>段落（p）タグ1</p>
<p>段落（p）タグ2</p>
<p>段落（p）タグ3</p>
<p>段落（p）タグ4</p>
<p>段落（p）タグ5</p>
<p>段落（p）タグ6</p>
</div>そして置換後は、以下のように p タグが h2 タグに切り替わります。
<div class="ptagBlock">
<h2>見出し（h2）タグ1</h2>
<h2>見出し（h2）タグ2</h2>
<h2>見出し（h2）タグ3</h2>
<h2>見出し（h2）タグ4</h2>
<h2>見出し（h2）タグ5</h2>
<h2>見出し（h2）タグ6</h2>
</div>置換前の文字列「段落（p）」も、全て「見出し（h2）」の文字列に置換されます。
ざっくりとしたコードの解説
コードはHTML・JavaScriptの2種類です。順に解説していきます。
HTML
HTMLは、上述のコード内容と同じく div タグに p タグが6つ並んでいます。
<div class="ptagBlock">
<p>段落（p）タグ1</p>
<p>段落（p）タグ2</p>
<p>段落（p）タグ3</p>
<p>段落（p）タグ4</p>
<p>段落（p）タグ5</p>
<p>段落（p）タグ6</p>
</div>後述するJavaScriptは for文のループで回すので、p タグは3つや9つなど、個数は何個でもOKです。
JavaScript
JavaScriptは、大きく分けて「置換する対象を指定」「文字列の取得」「置換前後の文字列の指定」「出力」の4つです。
// 置換する対象を指定
const pTag = document.querySelectorAll('.ptagBlock p');
for (i = 0; i < pTag.length; i++) {
// 対象の文字列を取得
const pTagText = pTag[i].innerHTML;
// 置換前後の文字を指定
const pTagTextNext = pTagText.replace('段落（p）タグ', '見出し（h2）タグ');
// 置換するタグと一緒に出力
pTag[i].outerHTML = '<h2 class="changeH">' + pTagTextNext + '</h2>';
console.log(pTagTextNext);
}冒頭に .querySelectorAll() で要素の対象を指定するので、ここを書き換えれば置換対象にする要素を変更できます。
ループを使って対象要素全部を一気に置換するコードです。
さいごに
いかがでしたでしょうか。
.outerHTMLの構文をはじめ、ループを使った記述とタグと文字を置換する方法についてご紹介しました。
ぜひ参考にしながら、JavaScriptのコードを書いて、理解を深めてもらえたら嬉しいです。
