javascript - 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

Because jQuery is adding breaks

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

但是有一个简单的方法可以解决这个问题:Node.normalize()

“The Node.normalize() method puts the specified node and all of its sub-tree into a "normalized" form. In a normalized sub-tree, no text nodes in the sub-tree are empty and there are no adjacent text nodes.”

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

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