jQuery查找和替换字符串答案

【问题标题】：jQuery find and replace stringjQuery查找和替换字符串
【发布时间】：2011-02-25 08:37:11
【问题描述】：

我在网站的某个地方有一个特定的文本，比如说“棒棒糖”，我想用“棉花糖”替换所有出现的这个字符串。问题是我不知道文本到底在哪里。我知道我可以这样做：

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

这可能行得通，但我需要尽可能少地重写 HTML，所以我在想这样的事情：

搜索字符串
找到最近的父元素
只重写最近的父元素
即使在属性中替换它，但不是全部替换它，例如在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 找到此插件的不错教程

标签： javascript jquery jquery-selectors

【解决方案1】：

你可以这样做：

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

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

此外，这可能存在性能问题。一般来说，jQuery 或 javascript 并不适合这种操作。你最好在服务器端做。

【讨论】：

我知道，很遗憾我无法在服务器端执行此操作。另外，您建议的解决方案不适合我，因为我不知道字符串的确切位置。可能在<span>，也可能在<h4>等等...
那你可以试试$("*")，但我不推荐。

【解决方案2】：

你可以这样做：

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

【讨论】：

【解决方案3】：

下面是我用彩色文本替换一些文本的代码。很简单，获取文本并将其替换为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);
});

【讨论】：

【解决方案4】：

你可以这样做：

HTML

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

jQuery

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

【讨论】：

【解决方案5】：

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

【讨论】：

我认为'replace'函数中字符串变量的引号需要去掉。

【解决方案6】：

为什么不向字符串容器添加类然后替换内部文本？就像在这个例子中一样。

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

【讨论】：

这是一个 4 岁的问题，已经回答了问题，但问题是我无法按照您的建议进行操作。
这个答案完全忽略了OP的规范：“我想替换所有出现的这个字符串......问题是我不知道文本到底在哪里。”