jQuery查找并replacestring

我在网站上的某个地方有一个特定的文本,比方说“棒棒糖”,我想用“marshmellows”replace这个string的所有事件。 问题是,我不知道文本究竟在哪里。 我知道我可以做这样的事情:

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

这可能会起作用,但我需要尽可能的重写HTML,所以我想像这样:

  1. searchstring
  2. find最接近的父元素
  3. 只重写最近的父元素
  4. 甚至replace这个属性,但不是全部,例如replace它在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”的每个出现都将被replace,只有<img src="...将保持不变,而实际上被操纵的唯一元素是<a>和两个<span> s <span>
有谁知道如何做到这一点?

你可以做这样的事情:

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

最好用文本标记所有需要用合适的类名检查的标签。

另外,这可能会有性能问题。 一般来说jQuery或JavaScript并不适合这种操作。 你最好在服务器端做。

你可以这样做:

 $(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/

下面是我用来代替一些文字的代码,用彩色文字。 这很简单,把文本,并在一个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); }); 

为什么你只是不向string容器添加一个类,然后replace内部文本? 就像在这个例子中一样。

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"); });