JavaScript 備忘録 | メシのタネ

jQuery11
このエントリーをはてなブックマークに追加

jQuery ドキュメント全体から特定の文字列を取得して置換

 2013/05/09

2014/11/4 修正

ドキュメント全体をBodyとした場合に、bodyタグの中から特定の文字列を探して検索する方法をかつてメモしました。
jQueryのとあるセレクタを使うと、指定タグの中から特定の文字列を検索することができます。これとeachや.replaceを組み合わせることで、
ドキュメント全体から特定の文字列を変換することができます。

containsセレクター


引数に入力した文字列を指定したタグの中から抽出してくれるセレクターです。

これを実行すると、DIVの中のhoge部分が赤文字になります。

bodyから特定文字列を探して文字列を変更させる


じゃあ単純にこうやれば良いじゃんってなりますよね。
div消してセレクタbodyに変えてやればおっけーじゃんってなりますよね。

そうすると、全部赤文字になります。困ります。
なのでreplaceを使って、タグをつけてstyleをかましてやると

一応実現する事が可能になります。
動きとしては、一回、bodyタグのtextを一度全部取り出して、
その中から指定の文字列をreplaceで探して、変換するって流れでやってると思います。

ここから: 2013年5月9日 元記事

メモ程度に記憶

bodyタグ全体の.html()を変数に入れて
replaceで青果を<すぱん>メモリーに変換

これではかどる。


    $('body:contains("青果")').each(function(){
        var txt = $(this).html();
        $(this).html(
            txt.replace(/青果/g,'<span>メモリー</span>')
       );
    });
    
   
 

このエントリーをはてなブックマークに追加

1 件のコメント


【はてなブログ】カテゴリーを階層化する方法 – ブログ運営のためのブログカスタマイズ  2016-05-04 09:25:15
[…] ・jQuery ドキュメント全体から特定の文字列を取得して置換 | Webプログラミング備忘録 | メシのタネ ・jQuery リファレンス::contains( ) ・【jQuery】記号などで囲まれた文字列を正規表現で […]

コメント

"jQuery ドキュメント全体から特定の文字列を取得して置換"
でメシのタネのおすすめを検索したよ!

プログラミング備忘録 | メシのタネ