jquery或php在块​​内部但不包括span

Question

我在块级标签中有html;我有搜索结果，用标签包装匹配的句子，如下：

<p>
Some text. More text. <span class=match>Sentence with match.</span> More text.
</p>

我的目标是隐藏（不删除）不匹配的文字。我认为最好的方法是将不匹配的文本和css样式包装起来：

<p>
<span class=nomatch>Some text. More text. </span><span class=match>Sentence with match.</span><span class=nomatch> More text.</span>
</p>

反转包装的种类。但是我该怎么做？我可以使用jquery或php，但它必须是DOM安全的，段落可能是任何块元素。

所以（这是组成的）：

$('.match').wrapOutside()

修改 我认为人们是对的，我需要在用于标记匹配的相同代码中进行“nomatch”标记。

Answer 1

要隐藏它，您可以为nomatch类提供CSS属性display：none。当你悬停或点击某处以查看更多上下文时，你可以输入一些javascript来使其淡入。

Answer 2

这应该可以解决问题。将$('p')替换为您想要的任何选择器。

$('p').each(function() {
    $.each(this.childNodes, function(i, child) {
        if (child.nodeType == 3) { // text node
            $(child).before(
                $('<span class="nomatch"></span>').text(child.data)
            ).remove();
        }
    });
});