• HOME > 
  • Javascript > 
  • jQueryで文字列の置換を行う方法【replaceメソッド...

jQueryで文字列の置換を行う方法【replaceメソッドの使い方】

投稿日:

広告

文字列の置換とは?

WEBサイトやWEBサービスの制作においては、ユーザーのアクションなどに応じて、元のHTMLに記述された文字列を別の文字列へと書き換えたい場面があります。

このページでは、JavascriptとそのライブラリであるjQueryを使用して文字列の置換を行う方法について解説します。

文字列の置換には、Javascriptの「replace()」メソッド、jQueryの「replaceAll()」メソッドを使用します。

replaceメソッドの使い方

replaceメソッドは次のように記述して使用します。

replaceメソッドの書き方

repalceメソッドを使えば、テキストのみ文字列の置換だけでなく、HTMLを含んだ文字列の置換も行うことが可能です。

なおrelapceはJavascriptのメソッドですのでjQueryを読み込んでいなくても使用することができますが、ここではreplace以外でjQueryのメソッドを使用していますので、参考にされる場合は事前にCDNなどでjQueryを読み込ませておいてください。

テキストを置き換える

まずは基本となるテキストの置換について解説します。

次の例では、「こんにちわ、太郎さん!」というテキストの名前の部分を別の文字列に置き換えるようにしています。

HTML

<div id="target">こんにちわ、太郎さん!</div>

jQuery

$(function(){
    var target = $("#target").text();
    var result = target.replace("太郎","花子");
    $("#target").text(result);
});

プレビュー

こんにちわ、太郎さん!

コードの解説

上記のコードについてひとつひとつ解説していきます。

2行目まずはじめに、対象となる書き換えたいテキストを取得する必要があります。

テキストの取得は、「text()」メソッドで行います。id「#target」という要素のテキストを取得します。

3行目続いて、取得したテキストの中の「太郎」という文字列をreplaceメソッドを使って「花子」という文字列に置き換えます。

4行目最後に再度text()メソッドを使って文字列の置き換えを行ったテキストをid「#target」という要素に書き換えれば完了です。

replaceメソッドはあくまでも文字列の置換を行うメソッドであり、ページ上に表示させるためにはtextメソッドなど他のメソッドを使う必要があります。

HTMLを置き換える

HTMLを含んだ文字列も同じ手順で置き換えることができます。

HTMLの取得には「html()」メソッドを使用します。

HTML

<div id="target">こんにちわ、<span>太郎</span>さん!</div>

jQuery

$(function(){
    var target2 = $("#target2").html();
    var result2 = target2.replace("<span>太郎</span>","<h3>花子</h3>");
    $("#target2").html(result2);
});

プレビュー

こんにちわ、太郎さん!
リンク先のサムネイル
jQueryのtext()の使い方【取得・追加・変更・削除の方法】

text()メソッドを使えば、ユーザーのアクションに応じて表示するテキストを切り替えるといった処理を行うことができます。html()メソッドは要素のHTMLタグを含んだテキストの追加や変更などを操作できます...【もっと読む】

ここで注意が必要なのは、上記の方法の場合に置換が行われるのは最初にヒットした文字列のみであるという点です。

下記のように2つ目以降の文字列は置換されません。

HTML

<div id="target">こんにちわ、太郎さん!太郎さんの今日の予定は何ですか?</div>

jQuery

$(function(){
    var target3 = $("#target3").text();
    var result3 = target3.replace("太郎","花子");
    $("#target3").text(result3);
});

プレビュー

こんにちわ、太郎さん!太郎さんの今日の予定は何ですか?

一致した文字列を全て置き換えたい場合は次項で説明する方法で行います。

一致した文字列を全て置き換える

一致した文字列を全て置き換えたい場合は次のように記述します。

一致した文字列を全て置き換える書き方

先程の例も次のようにすれば一致した文字列を全て置き換えることができます。

HTML

<div id="target">こんにちわ、太郎さん!太郎さんの今日の予定は何ですか?</div>

jQuery

$(function(){
    var target4 = $("#target4").text();
    var result4 = target4.replace(/太郎/g,"花子");
    $("#target4").text(result4);
});

プレビュー

こんにちわ、太郎さん!太郎さんの今日の予定は何ですか?

複数の箇所(要素)で一致した文字列を全て置き換える

複数の箇所(要素)で文字列の置換を行いたい場合は、記述の方法を変更しないと正しく置換が行えません。複数の箇所(要素)で文字列の置換を行う時は、each()メソッドを利用します。

HTML

<div class="test">こんにちわ、太郎さん!太郎さんの今日の予定は何ですか?</div>
<div class="test">こんばんわ、太郎さん!太郎さんの明日の予定は何ですか?</div>

jQuery

$(function(){
    $(".test").each(function(){
        var test = $(this).text();
        $(this).text(test.replace(/太郎/g,"花子"));
    });
});

プレビュー

こんにちわ、太郎さん!太郎さんの今日の予定は何ですか?
こんばんわ、太郎さん!太郎さんの明日の予定は何ですか?

正規表現を使って置き換える

replaceメソッドでは、正規表現を用いて特定の条件を満たした文字列を置き換えるようにすることも可能です。

下の例では、置き換えを行う対象を[0-9]とすることで全ての数字を「*」に置き換えています。

HTML

<div id="target5" class="target">パスワードは12345です。</div>

jQuery

$(function(){
    var target5 = $("#target5").text();
    var result5 = target5.replace(/[0-9]/g,"*");
    $("#target5").text(result5);
});

プレビュー

パスワードは12345です。

アルファベット小文字の場合は[a-z]、大文字の場合は[A-Z]と記述します。

replaceWithメソッドとreplaceAllメソッドの使い方

ここまで説明してきたreplaceメソッドに対して、replaceWithメソッドとreplaceAllメソッドはjQueryのメソッドです。

replaceメソッドよりもダイレクトかつ簡潔に要素の置き換えを行うことができます。

replaceWith

replaceWithとreplaceAllの違いは、記述の際にセレクタと置き換える文字列の順序が逆になるという点です。

replaceWithの書き方

HTML

<div id="target6" class="target">こんにちわ、太郎さん!太郎さんの今日の予定は何ですか?</div>

jQuery

$(function(){
    $("#target6").replaceWith('<div id="target6" class="target">こんにちわ、花子さん!花子さんの今日の予定は何ですか?<div>');
});

プレビュー

こんにちわ、太郎さん!太郎さんの今日の予定は何ですか?

replaceAll

replaceAllの書き方

HTML

<div id="target7" class="target">こんにちわ、太郎さん!太郎さんの今日の予定は何ですか?</div>

jQuery

$(function(){
    $('<div id="target6" class="target">こんにちわ、花子さん!花子さんの今日の予定は何ですか?<div>').replaceAll("#target7");
});

プレビュー

こんにちわ、太郎さん!太郎さんの今日の予定は何ですか?

replaceWithとreplaceAllは、文字列の置き換えというよりも要素の置き換えという意味合いの方が大きいかもしれません。

まとめ

以上がJavascript(jQuery)で文字列を置き換える方法です。replaceメソッドを使いこなすことができれば、ユーザーがフォームに入力した内容によって表示するテキストを変更するなど、操作に応じた動的なサイトを作ることができます。

広告

関連する記事

サムネイル

横スクロール可能なことを示すヒントを表示するJavascri……

2023年09月01日
Javascriptのライブラリ「ScrollHint(スクロールヒント)」を使えば、ユーザーに対して要素がスクロール可能であることをわかりやすく示すアイコンを表示することができます。
サムネイル

JavascriptでブラウザやOSを判定する方法【plat……

2023年09月01日
Javascriptのplatform.jsというライブラリを利用すれば、簡単にユーザーが使用しているブラウザやOS情報を取得し判別する処理を作ることが可能です。
サムネイル

Javascriptでフォーム送信時に確認ダイアログを出す方……

2023年09月01日
Javascriptでフォーム送信時にダイアログ表示させてユーザーに処理を続行して良いか確認するには「confirmメソッド」と「onsubmit属性」の2つを使用します。
サムネイル

Javascriptで文字のUnicode(UTF-16)を……

2023年09月01日
最終更新日:2023年08月29日
JavascriptのcharCodeAtを使うと、日本語(テキスト)のUnicode(UTF-16)を取得したり、Unicode(UTF-16)をテキストに変換することが可能です。
サムネイル

jQueryのblurでフォーカスが外れた時の処理を行う方法……

2023年05月01日
最終更新日:2023年05月31日
jQueryのblur()メソッドはフォームの入力ボックスなどでフォーカスが外れたときに処理を実行させることができるメソッドです。
サムネイル

jQueryのinArray()で配列内を検索する方法【要素……

2023年05月01日
最終更新日:2023年05月31日
jQueryのinArrayメソッドは、配列の中に特定の要素が含まれているかどうかを検索することができるメソッドです。
サムネイル

JavascriptのindexOfで文字列を検索する方法【……

2023年05月01日
最終更新日:2023年05月31日
indexOfメソッドを使用すると、テキストや配列の中に指定の文字列が含まれているかどうかを検索することができます。条件分岐に利用することで、ある文字が含まれている時といない時とで処理を分けることが可能になります。