javascript - 匹配没有标签内容的 HTML 文本

Question

我正在寻找用于 Javascript 的正则表达式来搜索 HTML 中的文本(例如“span”)。

例子:

<div>Lorem span Ipsum dor<a href="blabla">lablala</a> dsad <span>2</span> ... </div>

但只有“Lorem”之后的“span”应该被匹配，而不是 <span>标签。
对于第二个示例，如果我们搜索“bla”，则应该只匹配粗体文本。

编辑:

通过innerHTML获取HTML，匹配的会被<span class="x">$text</span>包围，然后重写为该节点的 innerHTML，所有这些都不会杀死其他标签。

EDIT2 和我的解决方案:

我写了自己的搜索，它是一个字符一个字符地搜索，带有缓存和标志。

感谢您的帮助!

Answer 1

您可以使用 dom 方法来处理每个文本节点。

此方法以父节点作为第一个参数并循环遍历其所有子节点， 使用作为第二个参数传递的函数处理文本节点。 该功能是您对测试节点的数据进行操作的地方， 例如，在“突出显示”范围内查找、替换、删除或换行找到的文本。

你可以只用第一个参数调用这个函数，它会返回一个数组 文本节点，然后您可以使用该数组来操作文本 - 这种情况下的数组项是每个节点，并且具有数据、父节点和兄弟节点。

document.deepText= function(hoo, fun){
    var A= [], tem;
    if(hoo){
        hoo= hoo.firstChild;
        while(hoo!= null){
            if(hoo.nodeType== 3){
                if(fun){
                    if((tem= fun(hoo))!== undefined){
                       A[A.length]= tem;
                    }
                }
                else A[A.length]= hoo;
            }
            else A= A.concat(arguments.callee(hoo, fun));
            hoo= hoo.nextSibling;
        }
    }
    return A;
}

//测试用例

function ucwords(pa, rx){
    var f= function(node){
        var t= node.data;
        if(t && t.search(rx)!=-1){
            node.data= t.replace(rx,function(w){return w.toUpperCase()});
            return node;
        }
        return undefined;
    }
    return document.deepText(pa, f);
}

ucwords(document.body,/\bspan\b/ig)