jQueryとJavaScriptのreplaceで文字列を置き換えるサンプルです。
Web画面のPタグやクラスの指定にjQueryのセレクタを使用し、文字列の変換はJavaScriptのreplaceで行います。
目次 | 指定の文字を置き換える |
複数の同じ文字を置き換る | |
複数の異なる文字を置き換る |
指定の文字を置き換える
文字を置き換るサンプル
ボタンを押すと、文字が変わります。
テスト:あいうえおあいうえお
上記サンプルのコードです。
<p>テスト:<span id="span1">あいうえおあいうえお</span></p>
<input type="button" id="button1" value="ボタン1" />
<input type="button" id="button2" value="ボタン2" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#button1").click(function () {
$("#span1").text($("#span1").text().replace("あいう", "AAA"));
});
$("#button2").click(function () {
$("#span1").text($("#span1").text().replace("AAA", "あいう"));
});
</script>
replaceメソッドの1つ目の引数が置き換え対象の文字列で、2つ目の引数が置換後の文字列です。
replaceの置換では正規表現を使用できます。
JavaScript replace 文字列を置換する(正規表現)
複数の同じ文字を置き換る
文字を置き換るサンプル
ボタンを押すと、文字が変わります。
テスト:あいうあいう
上記サンプルのコードです。
<p>テスト:<span id="span3">あいうあいう</span></p>
<input type="button" id="button5" value="ボタン5" />
<input type="button" id="button6" value="ボタン6" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#button5").click(function () {
$("#span3").text($("#span3").text().replace(/い/g, "B"));
});
$("#button6").click(function () {
$("#span3").text($("#span3").text().replace(/B/g, "い"));
});
</script>
複数の同じ文字を置き換る場合は、正規表現のオプションのgを使用します。
gはマッチしたものをすべて返します。
複数の異なる文字を置き換る
文字を置き換るサンプル
ボタンを押すと、文字が変わります。
テスト:あいうえおあいうえお
上記サンプルのコードです。
<p>テスト:<span id="span2">あいうえおあいうえお</span></p>
<input type="button" id="button3" value="ボタン3" />
<input type="button" id="button4" value="ボタン4" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#button3").click(function () {
$("#span2").text(
$("#span2").text().replace("あい", "AA").replace("えお", "BB")
);
});
$("#button4").click(function () {
$("#span2").text(
$("#span2").text().replace("AA", "あい").replace("BB", "えお")
);
});
</script>
複数の異なる文字を置き換る場合は、replaceメソッドを続けます。
8,9行目は同じ「$("#span2").text」ですがこの場合では必要です。
14,15行目も同じです。
関連の記事
JavaScript replace 文字列を置換する(正規表現)
jQuery 要素を置き換える(replaceWith/replaceAll)