.replace()

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

2022年4月28日 2分

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

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

.replace()
文字列を置換するサンプル
置換される前・された後のHTML
ざっくりとしたコードの解説
- HTML
- JavaScript
さいごに

.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 のプロパティを使って置換後の文字列を出力します。