jQueryのreplace()を使って文字を置換・削除するスニペット3選

2021年6月24日2021年7月26日 4分

jQueryのreplaceは、文字列を任意の文字に置換することができる便利で簡単なメソッドです。

静的なページでの実装はそんなに使わないですが、WordPressなどのCMSで使うことが多く、何かの文字を一律で置換・削除できてしまいます。

そんなjQueryのreplace()について、

任意の文字の後に br を入れるjQueryのスニペット
指定のタグを置換するjQueryのスニペット
指定の文字を削除するjQueryのスニペット

の内容で、実装のサンプルを交え解説していきます。

かかかず

それではご覧ください。

任意の文字の後に<br>を入れる
- 実装サンプル
- コピペ用コード
指定のタグを置換する
- 実装サンプル
- コピペ用コード
指定の文字を削除
- 実装サンプル
- コピペ用コード

任意の文字の後に<br>を入れる

任意の文字の後に br タグを付けるスニペットで、動的にタグがない状態で出力されている文章にセットして使うことが多いです。

かかかず

タグやクラスの細かい指定もできるので、結構重宝してます。

実装サンプル

そのままの状態と、句読点の「。」の後に <br>の改行が入るようにしたサンプルです。

そのままの場合

司馬遼太郎さんの小説「坂の上の雲」の冒頭の書き出しで、改行をせずに記述すると以下のとおりです。

文字が詰まってしまい、読みづらい印象です。

まことに小さな国が、開化期を迎えようとしている。小さなといえば、明治初年の日本ほど小さな国はなかったであろう。産業といえば農業しかなく、人材といえば三百年の間、読書階級であった旧士族しかなかった。明治維新によって、日本人ははじめて近代的な「国家」というものをもった。誰もが「国民」になった。不慣れながら「国民」になった日本人たちは、日本史上の最初の体験者としてその新鮮さに昂揚した。この痛々しいばかりの昂揚がわからなければ、この段階の歴史はわからない。社会のどういう階層のどういう家の子でも、ある一定の資格を取るために必要な記憶力と根気さえあれば、博士にも官吏にも軍人にも教師にもなりえた。この時代の明るさは、こういう楽天主義から来ている。

「。」の後に改行をした場合

以下は句読点の「。」に改行を入れた文章です。これだけでも、文字の迫ってくる感がなくなります。

コピペ用コード

$('.対象のタグやクラス').each(function(){ には、対象にしたいタグやクラスを記述して、txt.replaceAll("置換前の文字列", "置換後の文字列") を記載すればOKです。

コードを表示する

jQuery

$(function(){
  $('.textshort').each(function(){
    var txt = $(this).html();
    $(this).html(
      txt.replaceAll("。", "。<br />")
    );
  });
});

複数の文字列を指定したい場合

txt.replaceAll("置換前の文字列", "置換後の文字列") の後に、その下に追加で.replaceAll("置換前の文字列", "置換後の文字列")を記述すればOKです。

例えば、「、」「。」を指定したい場合、以下のような記述になります。

txt.replaceAll("、", "、<br />")
     .replaceAll("。", "。<br />")

指定のタグを置換する

手動でタグを書き換えることができますが、かなりの数を一気に変える場合や、CMSのエディタが決まったタグでしか出力できない時に使います。

使うことがないのが一番ですが、こんなやり方も覚えとくと便利です。

実装サンプル

そのままの状態と、指定のタグをh4で置換した時のサンプルです。

そのままの場合

pタグで記述した、何の変哲もない一文です。

坂の上の雲

タグの置換をした場合

jQueryで h4 タグに置換した一文です。ソース表示で見ると置換前の p タグのままですが、レンダリングが完了するとタグが置き換わります。

実際のタグやソースの確認方法は、Chromeのデベロッパーツールで見てください。そうすると置換されているはずです。

坂の上の雲

コピペ用コード

.replaceWith は、セレクタで指定した要素を、パラメータで指定した「要素」に置き換えます。

置換したいタグやクラスの指定をして設置ください。

コードを表示する

jQuery

jQuery(function() {
    jQuery("置換したいタグやクラス").each(function(){
        jQuery(this).replaceWith('文字列の前にくるタグ 例：<h4>'+jQuery(this).text()+'文字列の後にくるタグ 例：</h4>');
    });
});

指定のタグを置換するコードのちょっとした解説

('文字列の前にくるタグ例：<h4>'+jQuery(this).text()+'文字列の後にくるタグ例：</h4>'); に置換するタグを書きます。

ここのタグには、class付きでも置換できます。

例えば.replaceWith('<h4 class="h4classtitle">' のような記述でもOKです。

指定の文字を削除

そんなに使うことはないですが、これを応用して文字の置換に使ったりします。汎用性が高いです。

実装サンプル

そのままの状態と、【〜〜〜】のスミツキカッコを削除したサンプルです。

そのままの場合

pタグで、【〜〜〜】のスミツキカッコの一文です。

【坂の上の雲】

指定の文字を削除

replaceで、文字の両端につくスミツキカッコを指定して削除した一文です。

【坂の上の雲】

かかかず

こんな感じで、指定した文字が消えます。

コピペ用コード

簡単な関数で、$("対象にしたいタグやクラス") を指定して、replace("削除する文字列1", "") の文字を指定すればOKです。

コードを表示する

jQuery

$(function() {
  var divText = $("対象にしたいタグやクラス").html();
  divText = divText.replace("削除する文字列1", "") .replace("削除する文字列2", "");;
  $(".deletetext").html(divText);
});