2013.11.1

【jQuery】記号などで囲まれた文字列を正規表現で置換

01_s

jQueryで任意の文字列を正規表現で検索して置換する方法が便利だったので、メモです。
例えばソースコードをブログ上で表示するとき、特定のタグや記号で囲まれた文字列だけ色を変えたい、という場合に使えます。

サンプル

<pre><p id="firstLead" class="lead"></p></pre>

ダブルクォーテーションで囲まれた文字の色を赤くするため、spanタグを付ける、という想定です。

HTML

<pre><p id="firstLead" class="lead"></p></pre>

jQuery

$(function() {
  $('pre').each(function(){
    var txt = $(this).html();
    $(this).html(
      txt.replace(/"(.*?)"/g, '<span>"$1"</span>')
    );
  });
});

replaceメソッドでは、第一引数に検索する文字を指定し、第二引数に置換後の文字を指定します。

CSS

span {
  color: #ff0000;
}

ちょっと解説

検索の文字列について

/(.*?)/g

それぞれの文字の意味は以下です。

()

文字列のパターンをグループ化して記憶。置換後の文字などで呼び出すときに使う。

.*

任意の文字列(0回以上の繰り返し)

?

最小のパターンと一致。
これが無いと、一致した文字の最初から最後までの範囲で置換されるようになる。
例えば、id=”aaa” class=”bbb” とあった時に
<sapn>”aaa”</span> でなく
<sapn>”aaa” class=”bbb”</span> となる。

g

モード修飾子
一致した全てを置換
他に m,i がある

Javascriptによる正規表現まとめ
http://d.hatena.ne.jp/yutakikuchi/20110305/1299318337

$1

第一引数でグループ化した文字の呼び出し。
複数あれば、$2, $3… などと続いていく。

こちらも参考にさせていただきました、ありがとうございます。

jQueryで正規表現を学んでみる。【基礎編】
http://www.webopixel.net/javascript/195.html

Share & Send

  • このエントリーをはてなブックマークに追加
HOME >  HTML/JavaScript > 【jQuery】記号などで囲まれた文字列を正規表現で置換