JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

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

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptの.replaceとループを使って複数要素で一致する文字列を置換

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

.replace()

JavaScriptの.replaceとループを使って複数要素で一致する文字列を置換

JavaScriptの.replaceとループを使って複数要素で一致する文字列を置換

JavaScriptの .replace メソッドを使って、複数要素の文字列を置換します。

是非参考にしてみてください。

.replace()

JavaScriptの .replace() は、任意の文字列を別の文字列に置き換えるメソッドです。

const textElement = element.replace('置換前', '置換後');

標準の方法では、一番最初にマッチした文字列のみが置き換えられるメソッドなので注意しましょう。

文字列を置換するサンプル

早速サンプルですが、8つある各要素は全て p タグでできた要素です。

これらの p タグの中にある文字列「置換前」が、下部にある文字の置換のボタンクリックで、全て「置換後」に変更されます。

置換前の文字1

置換前にある文字2

置換前が文字3

置換前へ文字4

置換前も文字5

置換前でも文字6

置換前は文字7

置換前なら文字8

置換される前・された後のHTML

上述のサンプルでは、ボタンクリック見た目も切り替わるので一目瞭然ですが、コードの動きも理解できるようHTMLの置換前後も記載しておきます。

以下は「置換される前」のHTMLです。

<div class="ptagBlock">
<p>置換前の文字1</p>
<p>置換前にある文字2</p>
<p>置換前が文字3</p>
<p>置換前へ文字4</p>
<p>置換前も文字5</p>
<p>置換前でも文字6</p>
<p>置換前は文字7</p>
<p>置換前なら文字8</p>
</div>

ボタンクリックすることで、以下のように文字列のみ置換されます。ご覧の通り、タグは置換前と同じそのままの配置ですが、タグ内の「置換前」の文字列が全て「置換後」に置き換えられます。

<div class="ptagBlock">
<p>置換後の文字1</p>
<p>置換後にある文字2</p>
<p>置換後が文字3</p>
<p>置換後へ文字4</p>
<p>置換後も文字5</p>
<p>置換後でも文字6</p>
<p>置換後は文字7</p>
<p>置換後なら文字8</p>
</div>
かかかず
かかかず

この通り「中の文字列」だけが置換されます。

ざっくりとしたコードの解説

コードはHTML・JavaScriptの2種類です。ざっくりですが順に解説していきます。

HTML

HTMLは、上述のコード内容と同じく div タグに p タグが8つ並んでいます。

<div class="ptagBlock">
<p>置換前の文字1</p>
<p>置換前にある文字2</p>
<p>置換前が文字3</p>
<p>置換前へ文字4</p>
<p>置換前も文字5</p>
<p>置換前でも文字6</p>
<p>置換前は文字7</p>
<p>置換前なら文字8</p>
</div>

p タグ内の文字列には「置換前」の文字が入っています。

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('置換前', '置換後');
// 出力
pTag[i].innerHTML = pTagTextNext;
console.log(pTagTextNext)
}

冒頭に .querySelectorAll() で要素の対象を指定するので、ここを書き換えれば置換対象にする要素を変更できます。

かかかず
かかかず

さいごに .innerHTML のプロパティを使って置換後の文字列を出力します。

さいごに

先生

いかがでしたでしょうか。

この記事では.replace()の構文をはじめ、ループを使って文字列を置換する方法についてご紹介しました。

もしも文字列だけでなく、タグも置換する場合は .outerHTML を使った記述で可能なので、その際は以下の記事も参考にしてみてください。

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