jQuery:查找并替换 html 中的字符串；避免 src 和 href 值

Question

假设我有这个:

<div>
    People say <a href="apples.html">apples</a> are nice. 
    It's true, apples are nice. You go, <b>apples</b>!
    <img src="apples.jpg" />
</div>

我如何去替换该div(包括任何标签的元素内容和纯文本)中出现的每一个“苹果”(例如，用“橙子”)同时避免替换此类出现href 和 src 属性，或任何与此相关的属性。

所以最终结果是:

<div>
    People say <a href="apples.html">oranges</a> are nice.
    It's true, oranges are nice. You go, <b>oranges</b>!
    <img src="apples.jpg" />
</div>

应该注意，虽然 text() 在此示例中可以很好地完成工作，但我将替换为 html 元素，因此它在实际情况中并不是特别有用。

谢谢!

Answer 1

:contains选择器将在这里为您提供帮助。鉴于div是您搜索和替换的根，以下将允许您用橙子替换苹果:

$("div").find(":contains('apples')").each(function(){
    $this = $(this);

    //Example replacement using HTML, but can also just us text() for simple changes
    $this.html($("<i>").text("oranges"));
});

根据您的评论，我已经展示了它用一些 html ...斜体橙子替换苹果。

请参阅JSFiddle一个工作示例。

更新 - 更改源 html

评论指出，这错过了 div 正文中的“苹果”。如果您可以控制 Html(我假设您可以)，那么如果您可以更改 Html 以将问题“苹果”包装在一个跨度中，那么一切都会变得更容易，所以 <span>apples</span> 。这使得 html:

<div>
    People say <a href="apples.html">apples</a> are nice. 
    It's true, <span>apples</span> are nice. You go, <b>apples</b>!
    <img src="apples.jpg" />
</div>

基本上，需要适当的标记来帮助您。查看更新后的JSFiddle .

如果不可能，则需要额外的正则表达式来捕获此问题。

更新 - 无法更新源 html，使用正则表达式

好吧，所以改变源 html 是不可能的。以下解决方案仅在 html 上使用正则表达式，它匹配所有后跟“<”或空格的“苹果”:

$("div:contains('apples')").each(function(){
    $this = $(this);
    $this.html($this.html().replace(/apples(?=<|\s)/gi, "oranges"));
});

JSFiddle中显示的工作版本