Question

我正在尝试用我自己创建的元素替换大型HTML文档中的一小部分文本。

文本可能是大量的文本，html，图像，无论如何，我想要的是找到某个字符串的第一个（或全部）位置，并将其替换为我创建的元素使用$('< span>')。

使用简单的text.replace('the string', $('< span>'));并不能解决问题（我留下的是[object Object]，而不是我想要的实际< span>。

我不仅仅注入直接HTML的原因是因为我想保留与我正在创建的对象相关的所有绑定。并使用自定义ID替换，然后在HTML更改后附加绑定到ID，看起来有点脏。

感谢您的帮助！：）

Answer 1

这并不容易。一旦你选择了text()，你就会得到一个没有元素节点信息的简单字符串，所以对其进行替换不会改变HTML DOM。

您要做的是逐个搜索树中的每个Text节点。遗憾的是，jQuery没有为处理Text节点提供太多帮助。

您可以使用this question中的findText功能。此用法会将每个“字符串”替换为空<span>：

findText(document.body, /the string/g, function(node, match) {
    var span= document.createElement('span');
    node.splitText(match.index+match[0].length);
    node.data= node.data.slice(0, match.index);
    node.parentNode.insertBefore(span, node.nextSibling);
});

（如果您需要在不同的文本节点和元素中查找文本，那就是much more complicated proposition。）

Answer 2

您很可能想要突出显示插件，只需根据需要修改以包装链接。

http://www.unwrongest.com/projects/highlight/

Answer 3

一个简单的解决方案

text.replace('the string', '<span></span>');

如果您需要更精细的元素，则必须将元素附加到您想要的位置。

$("<span/>").appendTo(element);

在您的示例中，它正在用object.toString()

替换文本

用jQuery中的链接替换文本

3 个答案: