javascript - 用包含 html 的文本替换元素内的文本，而不删除已经存在的 html

Question

我正在尝试创建一个文本搜索功能，但当元素中有 html 时，我很难让它工作。这是一些简单的 html 来演示我的问题。

<b>
    <input type="checkbox" value="" />
    I need replaced
</b>

这是我目前在 javascript 上的位置。假设里面没有 html，它工作得很好。

$("*", search_container).each(function() {
    var replaceTxt = $(this).text().replace(new RegExp("(" + search_term + ")", 'i'), '<span style="color: #0095DA;" class="textSearchFound">$1</span>');
    $(this).text().replaceWith(replaceTxt);
}); 

当用户输入时，我需要用跨度替换文本。因此，当他/她键入时，内容应如下所示。

<b>
    <input type="checkbox" value="" />
    <span style="color: #0095DA" class="textSearchFound">I need</span> replaced
</b>

更新

在查看被投票为重复的问题后，我想到了这个。虽然可能很接近，但它将 html 作为我不想要的文本插入到 DOM 中。请投票重新打开它。

$("*", search_container).each(function() {
    var node = $(this).get(0);
    var childs = node.childNodes;
    for(var inc = 0; inc < childs.length; inc++) {
        //Text node
        if(childs[inc].nodeType == 3){ 
            if(childs[inc].textContent) {
                childs[inc].textContent = childs[inc].textContent.replace(new RegExp("(" + search_term + ")", 'i'), '<span style="color: #0095DA;" class="textSearchFound">$1</span>');
             } 
             //IE
             else {
                 childs[inc].nodeValue = childs[inc].nodeValue.replace(new RegExp("(" + search_term + ")", 'i'), '<span style="color: #0095DA;" class="textSearchFound">$1</span>');
            }
        }
    }
});

Answer 1

这并不漂亮，但最好的方法是递归地遍历页面上的每个节点。当您遇到文本节点时，请检查它是否包含您的搜索字符串。如果找到它，请删除原始文本节点并将其替换为匹配前文本的文本节点、具有突出显示匹配的新元素以及匹配后文本的文本节点。

这是一个示例函数:

var highlightSomeText = function(needle, node){
    node = node || document.body; // initialize the first node, start at the body

    if(node.nodeName == 'SCRIPT') return; // don't mess with script tags 

    if(node.nodeType == 3){ // if node type is text, search for our needle
        var parts = node.nodeValue.split(needle); // split text by our needle
        if(parts.length > 1){ // if we found our needle
            var parent = node.parentNode
            for(var i = 0, l = parts.length; i < l;){
                var newText = document.createTextNode(parts[i++]); // create a new text node, increment i
                parent.insertBefore(newText, node);
                if(i != l){ // if we're not on the last part, insert a new span element for our highlighted text
                    var newSpan = document.createElement('span');
                    newSpan.className = 'textSearchFound';
                    newSpan.style.color = '#0095DA';
                    newSpan.innerHTML = needle;
                    parent.insertBefore(newSpan, node);
                }
            }
            parent.removeChild(node); // delete the original text node
        }
    }

    for(var i = node.childNodes.length; i--;) // loop through all child nodes
        highlightSomeText(needle, node.childNodes[i]);
};

highlightSomeText('I need');

还有一个关于 jsfiddle 的演示:http://jsfiddle.net/8Mpqe/

---

编辑: 这是一个更新的方法，它使用正则表达式来区分大小写:http://jsfiddle.net/RPuRG/

更新行:

var parts = node.nodeValue.split(new RegExp('(' + needle + ')','i'));

使用包裹在捕获组 () 中的正则表达式，捕获的结果将拼接成部分数组。

newSpan.innerHTML = parts[i++];

新 span 元素的文本将是我们数组中的下一部分。

编辑 2: 由于此函数在某些文本字段的每个 keyup 事件上都会被调用，所以提问者希望在每次运行之前删除突出显示的 span 标签。为此，有必要解包每个突出显示的元素，然后在父节点上调用 normalize 以将相邻的文本节点重新合并在一起。这是一个 jQuery 示例:

$('.textSearchFound').each(function(i, el){
    $(el).contents().unwrap().
    parent()[0].normalize();
});

这是完整的工作演示:http://jsfiddle.net/xrL3F/