Jquery - 用标记替换文本而不影响 HTML答案

【问题标题】：Jquery - Replace text with tokens without affecting the HTMLJquery - 用标记替换文本而不影响 HTML
【发布时间】：2016-10-10 14:24:22
【问题描述】：

我正在尝试解析 DOM 并用标记替换 text 的一部分，例如检测电子邮件然后用 {{EMAIL}} 字符串替换它而不更改 HTML 给定以下 HTML（例如，可以不同）：

<div dir="ltr" style="direction: ltr; text-align: left;">
   this is <span style="font-style:italic;">my</span>
    email <span title="bla@bla.com" style="font-weight:bold;">bla@bla.com&nbsp;</span>
</div>

我怎样才能只替换测试部分：

<div dir="ltr" style="direction: ltr; text-align: left;">
   this is <span style="font-style:italic;">my</span>
    email <span title="bla@bla.com" style="font-weight:bold;">{{EMAIL}}&nbsp;</span>
</div>

【问题讨论】：

您的意思是使用车把？在这里查看：handlebarsjs.com
如何转换它，该模板应该做什么，它来自哪里？
除了展示您的作品和您尝试过的内容之外，请详细说明您要替换的具体内容（或“可能不同”的含义）——除此之外的内容是否总是完整的最后一个 &nbsp; 应该被令牌替换？你为什么还要在里面放一个&nbsp;？
Replace text in HTML page with jQuery的可能重复
感谢您的回复，请查看我的修改

标签： javascript jquery html

【解决方案1】：

您可以将 id="myspan" 添加到您需要更改的 DOM 元素中，并在 jquery 的帮助下更改 innerHTML ，如下所示：

HTML：

<div dir="ltr" style="direction: ltr; text-align: left;">
   this is <span style="font-style:italic;">my</span>
    email <span id="myspan" style="font-weight:bold;">{{EMAIL}}&nbsp;</span>
</div>

JS：

$('#myspan').innerHTML = "{{EMAIL}}&nbsp;";

【讨论】：

感谢回复，但是 HTML 不是硬编码的，对标签没有任何想法，或者有不同的 innerHTML
我给你一个 +1 的回复

【解决方案2】：

您需要选择具有title 属性的元素并使用.filter() 过滤所选元素，该选择元素在title 属性中具有电子邮件地址。然后用新文本替换电子邮件地址。

$("div > [title]").filter(function(){
    return $(this).attr("title").match(/^[\w]+@[\w.]+\.[\w]+$/g);
}).text(function(i, text){
    return text.replace(/^[\w]+@[\w.]+\.[\w]+/g, "{{EMAIL}}");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div dir="ltr" style="direction: ltr; text-align: left;">
   this is <span style="font-style:italic;">my</span>
    email <span title="bla@bla.com" style="font-weight:bold;">bla@bla.com&nbsp;</span>
</div>

【讨论】：

感谢回复，标题只是一个例子。我无法控制输入 HTML
@ShlomiSchwartz 你说如果电子邮件字符串存在于标题属性中，它将被替换。该代码适用于任何标签。
如果您需要查找以文本形式编写的电子邮件地址的所有实例，则可以使用正则表达式（尽管您应该使用数据属性注释这些标签以表明它们包含需要更改的文本）。或者，我相信您可以将整个 DOM 转换为字符串，在整个字符串上运行正则表达式，并使用匹配组返回其内容中包含电子邮件地址的所有节点。有关匹配组和正则表达式的更多信息，请参阅regexr.com 的“备忘单”链接。
正则表达式可能是一个解决方案，但如果整个 Dom 是一个字符串，那么电子邮件将在属性中被替换为，而我想要的只是替换标签的文本
@ShlomiSchwartz .text() 仅返回元素文本，text.replace() 仅替换文本中的电子邮件。

【解决方案3】：

如果需要查找和替换文本，可以随时使用 JQuery 的 :contains 选择器。就像在这里找到的示例一样： Find text string using jQuery?

您可以使用 $('span:contains("bla@bla.com") 甚至 *:contains 如果您不搜索特定标签。

获得所有实例后，您可以按照 Mohammad 的建议进行文本替换

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
我没有想到的明显问题。感谢您指出！