jQuery unwrap增加了一个休息时间

Question

我有一个jQuery高亮工具，可以动态地将一个类添加到字符串中。 如果元素包含单词

<p>Hello World</p>

并且用户搜索'ell'，它会为单词

添加跨度

<p>H<span>ell</span>o world</p> 

重置这个，我用

$("span").contents().unwrap();

问题在于dom，文本现在看起来像这样

<p>H
ell
o World</p>

因为jQuery正在添加中断，所以搜索“Hello”不会起作用。 我试过删除换行符并尝试了css但没有运气

$('body').html().replace(/(\r\n|\r|\n){2,}/g, '$1\n');

p {
  white-space: nowrap;
}

任何建议？

Answer 1

  

因为jQuery正在添加中断

不，它没有添加休息时间。你所看到的只是三个独立的文本节点。您之前有三个文本节点，一个在跨度之前和之后，一个在内部 - 并且删除跨度已经留下了这三个单独的文本节点。

但有一种简单的解决方法：Node.normalize()

  

“Node.normalize()方法将指定节点及其所有子树置于”规范化“形式。在规范化的子树中，子树中没有文本节点为空，并且没有相邻的文本节点。“

请注意，这是HTML元素对象的方法，而不是jQuery对象 - 因此您需要在调用此方法之前取消引用jQuery对象：

$("span").contents().unwrap();
$("p")[0].normalize();