JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptの.outerHTMLとループで複数要素のタグと文字列を置換

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.outerHTML

JavaScriptの.outerHTMLとループで複数要素のタグと文字列を置換

JavaScriptの.outerHTMLとループで複数要素のタグと文字列を置換

タグも含まれる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のコードを書いて、理解を深めてもらえたら嬉しいです。