jQueryは文字列を見つけて置換します


86

ウェブサイトのどこかに特定のテキスト、たとえば「lollypops」があり、この文字列のすべての出現箇所を「marshmellows」に置き換えたいと思います。問題は、テキストが正確にどこにあるのかわからないことです。私は次のようなことができることを知っています:

$(body).html($(body).html().replace('lollypops', 'marshmellows'));

これはおそらくうまくいくでしょうが、私はできるだけ少ないHTMLを書き直す必要があるので、私は次のようなことを考えています。

  1. 文字列を検索する
  2. 最も近い親要素を見つける
  3. 最も近い親要素のみを書き換えます
  4. これを属性でも置き換えますが、すべてではありません。たとえば、で置き換えますがclass、では置き換えませんsrc

たとえば、私はこのような構造になります

<body>
    <div>
        <div>
            <p>
               <h1>
                 <a>lollypops</a>
               </h1>
            </p>
            <span>lollypops</span>
        </div>
    </div>
    <p>
       <span class="lollypops">Hello, World!</span>
       <img src="/lollypops.jpg" alt="Cool image" />
    </p>
<body>

この例では、「lollypops」のすべての出現箇所が置き換えられ、<img src="...同じままであり、実際に操作される要素は<a>と両方<span>です。
誰かがこれを行う方法を知っていますか?


テキストを置き換えるための優れたよく書かれたプラグインがあります。jquery-replacetext-plugin。プラグインはテキストを置き換え、すべてのタグと属性を変更しません。このプラグインの優れたチュートリアルは、spotlight-jquery-replacetext
Hussein

回答:


153

あなたはこのようなことをすることができます:

$("span, p").each(function() {
    var text = $(this).text();
    text = text.replace("lollypops", "marshmellows");
    $(this).text(text);
});

適切なクラス名で調べる必要があるテキストですべてのタグをマークすることをお勧めします。

また、これにはパフォーマンスの問題がある可能性があります。一般に、jQueryまたはjavascriptは、この種の操作にはあまり適していません。サーバー側で行う方が良いでしょう。


残念ながら、サーバー側ではこれを実行できません。また、文字列が正確にどこにあるかわからないため、あなたが提案した解決策は私には不適切です。入っているかもしれません<span>、入っているかもしれません<h4>...
暗号2011

次に、$( "*")を試すことができますが、お勧めしません。
kgiannakakis 2011

14

あなたはこのように何かをすることができます:

$(document.body).find('*').each(function() {
    if($(this).hasClass('lollypops')){ //class replacing..many ways to do this :)
        $(this).removeClass('lollypops');
        $(this).addClass('marshmellows');
    }
    var tmp = $(this).children().remove(); //removing and saving children to a tmp obj
    var text = $(this).text(); //getting just current node text
    text = text.replace(/lollypops/g, "marshmellows"); //replacing every lollypops occurence with marshmellows
    $(this).text(text); //setting text
    $(this).append(tmp); //re-append 'foundlings'
});

例:http//jsfiddle.net/steweb/MhQZD/


7

以下は、一部のテキストを色付きのテキストに置き換えるために使用したコードです。シンプルで、テキストを取得してHTMLタグ内で置き換えます。そのクラスタグ内の各単語に対して機能します。

$('.hightlight').each(function(){
    //highlight_words('going', this);
    var high = 'going';
    high = high.replace(/\W/g, '');
    var str = high.split(" ");
    var text = $(this).text();
    text = text.replace(str, "<span style='color: blue'>"+str+"</span>");
    $(this).html(text);
});

2
var string ='my string'
var new_string = string.replace('string','new string');
alert(string);
alert(new_string);

1
'replace'関数の文字列変数を囲む引用符は削除する必要があると思います。
Jason Glisson

0

あなたはこのようなことをすることができます:

HTML

<div class="element">
   <span>Hi, I am Murtaza</span>
</div>


jQuery

$(".element span").text(function(index, text) { 
    return text.replace('am', 'am not'); 
});

-3

文字列コンテナにクラスを追加してから、内部テキストを置き換えないのはなぜですか?この例のように。

HTML:

<div>
    <div>
        <p>
           <h1>
             <a class="swapText">lollipops</a>
           </h1>
        </p>
        <span class="swapText">lollipops</span>
    </div>
</div>
<p>
   <span class="lollipops">Hello, World!</span>
   <img src="/lollipops.jpg" alt="Cool image" />
</p>

jQuery:

$(document).ready(function() {
    $('.swapText').text("marshmallows");
});

2
これは4歳で、すでに回答済みの質問ですが、問題は、あなたが提案していることを私ができないことでした。
暗号2015年

この回答は、OPの仕様を完全に無視しています。「この文字列のすべての出現箇所を置き換えたい...問題は、テキストが正確にどこにあるかわからないことです。」
ルーク
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.