jquery unwrap() 分割问题

Question

我有一个函数可以在 dom 匹配字符周围添加一个元素。

因此用户搜索 "Can"

例如，“<td>Canada</td>”的每个实例都会变成

<td><strong class='highlight'>Can</strong>Ada</td>

当用户进行下一次搜索时，旧的突出显示将被删除。

像这样，$('.highlight').contents().unwrap();

问题是，如果用户随后尝试对加拿大进行另一次搜索，它将找不到，因为（至少对我而言）发生了一些奇怪的事情...

页面仍然显示 'Canada' 这个词，如果我使用 .html() 或 .text() 警告 table 单元格的内容，警告仍然显示 'Canada'.

如果我使用 chrome 检查器右键单击 table 单元格中的单词 canada 我可以看到它现在像

一样拆分

<td>
    "Can" 
    "Ada" 
</td>

所以搜索 dom 加拿大将不再找到它，但搜索 'Can' 会......

所以这个拆分是怎么这样的，但是在警报时拆分没有保持，我该如何解决它，所以当我删除强元素时它仍然是一个字符串...？

谢谢

Answer 1

这最好通过 element.normalize 解决。

unwrap() 将您的元素拆分为单独的文本节点，normalize() 会将它们重新合并在一起。删除突出显示后，只需循环遍历所有带有文本的元素（在本例中 td）并对其进行标准化。

$('.highlight').contents().unwrap();

$('td').each(function(index,td){
    td.normalize();
});

jquery unwrap() sting split issue