使用 JQuery 替换 HTML 页面上的特定字符串答案

【问题标题】：Replace a specific string on an HTML page using JQuery使用 JQuery 替换 HTML 页面上的特定字符串
【发布时间】：2009-10-28 13:34:35
【问题描述】：

我们正在提供要导入并显示在其他人页面上的 HTML 内容 blob。页面的所有者在我们的内容 blob 周围放置了一个标题，但标题是我们提供内容的 Web 服务的名称，而不是我们希望向用户显示的用户友好名称。他们不知道如何更改标题，我们不想更改 Web 服务的名称，并且它需要在几天后看起来不错，以便进行演示。

理想的解决方案是让他们弄清楚如何使用他们的门户工具来自定义标题，但这不太可能在演示之前发生。所以我想我们可以在发送给他们的内容中包含一些 JavaScript，这会改变他们的标题。这会让他们有时间弄清楚他们在做什么。

他们的标题代码如下所示：

<div class="titleClass"> Bad Title </div>

我想将“Bad Title”替换为“Good Title”。我想使用 jQuery 选择器在页面上找到此文本，但不幸的是，有多个带有 titleClass 类的 div 项，我只想更改其中一个....有没有我可以使用的选择器检查 div 标签内的文本“Bad Title”？还是我必须编写一个单独的函数来遍历页面上所有不同的标题，并测试每个标题是否包含“错误标题”？如果我必须做第二个，有人有示例代码可以分享吗？

【问题讨论】：

标签： jquery jquery-selectors

【解决方案1】：

首先获取所有匹配文本的元素的集合：

var $matches = $('div.titleClass').filter(function() {
    return $(this).text() == 'Bad Title';
});

然后替换匹配元素的文本：

$matches.each(function() {
    $(this).text('New Title');
});

上面将查找具有文本完全匹配“错误标题”的元素。如果您想要任何包含文本“Bad Title”的元素，例如'A Bad Title'，你应该使用indexOf或search，例如：

return $(this).text().indexOf('Bad Title') > -1;

最后一个警告是区分大小写。如果您想进行不区分大小写的匹配，我建议您这样做：

// the div contains Bad Title of whatever case
return $(this).text().search(/Bad Title/i) > -1;

// the div exactly matches Bad Title of whatever case
return $(this).text().search(/Bad Title/i) > == 0;

【讨论】：

@jitter - 这取决于他是否希望标题包含“错误标题”或匹配“错误标题”。我假设是后者。
我真的很高兴有这两种选择。谢谢！
@jitter - 我已重新编辑以包含您的想法以及不区分大小写的匹配。希望这涵盖了大多数用例。
jQuery 让人变得愚蠢和懒惰，我发誓。这就是你正在做的事情：首先你得到所有具有“titleClass”类的div。然后你遍历它们并删除那些没有正确文本的。然后你再次循环它们并设置文本。没有理由在这里循环两次。

【解决方案2】：

也许你想做得更简单？

$(document).ready( function() {
  $('div.titleClass:contains("Bad Title")').text( "Good title" );
});

查看contains 选择器。

【讨论】：

很遗憾，不能完全匹配。