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

不，它不是添加中断。您所看到的只是三个独立的文本节点。您之前有 3 个文本节点，跨度之前和之后各有一个，跨度内部各有一个 - 删除跨度后只剩下这三个单独的文本节点。

但是有一个简单的方法可以解决这个问题: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();