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>

在此示例中,每次出现的“棒棒糖”都将被替换,仅<img src="...会保持不变,而实际上将被操纵的唯一元素将是,<a>并且都为<span>s。
有人知道怎么做这个吗?


有一个出色的文字替换插件。jquery-replacetext-plugin。该插件将替换文本,而所有标签和属性均保持不变。您还可以在Spotlight-jquery-replacetext上
Hussein

Answers:


153

您可以执行以下操作:

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

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

另外,这可能会出现性能问题。一般而言,jQuery或javascript并不真正适合此类操作。您最好在服务器端执行此操作。


我知道,很遗憾,我无法在服务器端执行此操作。另外,您建议的解决方案也不适合我,因为我不知道字符串的确切位置。可能在<span>,可能在<h4>,等等...
cypher

然后,您可以尝试$(“ *”),但我不建议这样做。
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
我认为需要删除“替换”函数中字符串变量周围的引号。
杰森·格里森

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岁的儿童,已经回答了问题,但是问题是我无法按照您的建议去做。
密码

这个答案完全忽略了OP的规范:“我想替换所有出现的字符串...问题是我不知道文本的确切位置。”
路加福音
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.