JavaScript正则表达式匹配文本忽略HTML

是否可以在“

中匹配“狗真的很胖”狗真的很胖！

”并在其周围添加“

匹配的内容”

我的意思不是特别的，但通常能够忽略HTML搜索文本，将其保留在最终结果中，并在其周围添加跨度

编辑：

---

考虑到HTML标记重叠的问题，是否可以匹配一个短语，并在每个匹配的单词周围添加跨度？这里的问题是，我不希望单词“dog”不在搜索的上下文中时匹配，在本例中，“dog真的很胖。”

如果使用jQuery，可以对包含正在搜索的文本的元素使用

text

属性。鉴于此标记：

<p id="the-text">
  The <strong>dog</strong> is really <em>really</em> fat!
</p>

您可以在该文本上进行正则表达式搜索，而不是在标记中进行搜索

---

没有jQuery，我无法确定从所有子元素提取和连接文本节点的简单方法。

Naah。。。只需使用好的旧RegExp；）

var htmlString=“这只狗真的很胖！”；
var regexp=/更新：

这是一把你想要的小提琴。但是，您需要更新
htmlTagRegEx
来处理任何HTML标记上的匹配，因为这只是执行一个简单的匹配，不会处理所有情况


另外，下面是代码。基本上，它一个接一个地取出html元素，然后在文本中进行替换，在匹配的选择周围添加突出显示范围，然后一个接一个地推回html元素。这很难看，但这是我能想到的最简单的让它工作的方法

function highlightInElement(elementId, text){
    var elementHtml = document.getElementById(elementId).innerHTML;
    var tags = [];
    var tagLocations= [];
    var htmlTagRegEx = /<{1}\/{0,1}\w+>{1}/;

    //Strip the tags from the elementHtml and keep track of them
    var htmlTag;
    while(htmlTag = elementHtml.match(htmlTagRegEx)){
        tagLocations[tagLocations.length] = elementHtml.search(htmlTagRegEx);
        tags[tags.length] = htmlTag;
        elementHtml = elementHtml.replace(htmlTag, '');
    }

    //Search for the text in the stripped html
    var textLocation = elementHtml.search(text);
    if(textLocation){
        //Add the highlight
        var highlightHTMLStart = '<span class="highlight">';
        var highlightHTMLEnd = '</span>';
        elementHtml = elementHtml.replace(text, highlightHTMLStart + text + highlightHTMLEnd);

        //plug back in the HTML tags
        var textEndLocation = textLocation + text.length;
        for(i=tagLocations.length-1; i>=0; i--){
            var location = tagLocations[i];
            if(location > textEndLocation){
                location += highlightHTMLStart.length + highlightHTMLEnd.length;
            } else if(location > textLocation){
                location += highlightHTMLStart.length;
            }
            elementHtml = elementHtml.substring(0,location) + tags[i] + elementHtml.substring(location);
        }
    }

    //Update the innerHTML of the element
    document.getElementById(elementId).innerHTML = elementHtml;
}

函数highlightInElement（元素ID，文本）{
var elementHtml=document.getElementById（elementId）.innerHTML；
var标签=[]；
var标记位置=[]；
var htmlTagRegEx=/{1}/；
//从elementHtml中删除标记并跟踪它们
var-htmlTag；
while（htmlTag=elementHtml.match（htmlTagRegEx））{
标记位置[tagLocations.length]=elementHtml.search（htmlTagRegEx）；
tags[tags.length]=htmlTag；
elementHtml=elementHtml.replace（htmlTag'，）；
}
//在剥离的html中搜索文本
var textLocation=elementHtml.search（文本）；
如果（文本位置）{
//添加突出显示
var highlightHTMLStart=''；
var highlightHTMLEnd=''；
elementHtml=elementHtml.replace（text，highlightHTMLStart+text+highlightHTMLEnd）；
//重新插入HTML标记
var textEndLocation=textLocation+text.length；
对于（i=tagLocations.length-1；i>=0；i--）{
var位置=标记位置[i]；
如果（位置>文本结束位置）{
位置+=highlightHTMLStart.length+HighlightHtmlLend.length；
}else if（位置>文本位置）{
位置+=highlightHTMLStart.length；
}
elementHtml=elementHtml.substring（0，位置）+标记[i]+elementHtml.substring（位置）；
}
}
//更新元素的innerHTML
document.getElementById（elementId）.innerHTML=elementHtml；
}
您可以使用string replace替换这个表达式
，您将获得字符串使用JQuery的更简单方法是

originalHtml = $("#div").html();

    newHtml = originalHtml.replace(new RegExp(keyword + "(?![^<>]*>)", "g"), function(e){
                      return "<span class='highlight'>" + e + "</span>";
                   });

$("#div").html(newHtml);

originalHtml=$（“#div”）.html（）；
newHtml=originalHtml.replace（newregexp（关键字+“（？！[^]*>）”，“g”），函数（e）{
返回“+e+”；
});
$（“#div”）.html（newHtml）；

这对我来说很好。
下面是一个有效的正则表达式示例，用于排除html标记和Java脚本中的匹配项：


在replace（）脚本中使用此正则表达式

/（a）（？！（[^）（？！]*？>）（？！[^
this.keywords.forEach（keyword=>{
el.innerHTML=el.innerHTML.replace(
RegExp（关键字+'（？！[^]*>）'，'ig'），
匹配=>`${matched}`
)
})
一般来说，没有。不要对HTML使用正则表达式。使用HTML解析器。另外，请使用StackOverflow中的代码突出显示功能。他没有，他只是想匹配特定的文本。除了JavaScript，我没有其他可以触摸的东西。我以为我使用了反勾号，而使用了引号。比这更糟糕的是，
我怎么办你说这只狗真的很胖！你说什么？
你打算让它看起来像：
我说这只狗真的很胖！你说什么？
好问题，这很糟糕……我想我不能使用jQuery。哦，是的，我忘了jQuery文本。你为什么不能使用jQuery？看起来很可爱……是吗圣诞节了吗？无论如何，我认为这不会解决HTML标签重叠的问题，是吗？你在哪里输入搜索到的词？：）抱歉，我错过了最后一个..regexp将匹配每个html标记哦，我想我明白了，它会去掉所有html标记，对吗？啊，是的，我需要的是让它匹配一些文本，因为人类阅读它并添加hightlight类。：）谢谢，但我需要匹配文本并保留标记。@Francisc：将文本与文本进行匹配。如果匹配，则使用innerHTML获取html。是的，但innerHTML是什么？文本可能是：
狗真的很胖。
，我想找到
狗真的是
，并在其周围添加
，但这会覆盖它请点击
元素。@Francisc：很抱歉之前有误会。请检查我更新的解决方案，因为我认为它现在解决了您需要做的事情。如果您使用它，我肯定会建议您研究更彻底的正则表达式。哇，这一定花了一段时间编写。非常感谢。
function highlightInElement(elementId, text){
    var elementHtml = document.getElementById(elementId).innerHTML;
    var tags = [];
    var tagLocations= [];
    var htmlTagRegEx = /<{1}\/{0,1}\w+>{1}/;

    //Strip the tags from the elementHtml and keep track of them
    var htmlTag;
    while(htmlTag = elementHtml.match(htmlTagRegEx)){
        tagLocations[tagLocations.length] = elementHtml.search(htmlTagRegEx);
        tags[tags.length] = htmlTag;
        elementHtml = elementHtml.replace(htmlTag, '');
    }

    //Search for the text in the stripped html
    var textLocation = elementHtml.search(text);
    if(textLocation){
        //Add the highlight
        var highlightHTMLStart = '<span class="highlight">';
        var highlightHTMLEnd = '</span>';
        elementHtml = elementHtml.replace(text, highlightHTMLStart + text + highlightHTMLEnd);

        //plug back in the HTML tags
        var textEndLocation = textLocation + text.length;
        for(i=tagLocations.length-1; i>=0; i--){
            var location = tagLocations[i];
            if(location > textEndLocation){
                location += highlightHTMLStart.length + highlightHTMLEnd.length;
            } else if(location > textLocation){
                location += highlightHTMLStart.length;
            }
            elementHtml = elementHtml.substring(0,location) + tags[i] + elementHtml.substring(location);
        }
    }

    //Update the innerHTML of the element
    document.getElementById(elementId).innerHTML = elementHtml;
}

originalHtml = $("#div").html();

    newHtml = originalHtml.replace(new RegExp(keyword + "(?![^<>]*>)", "g"), function(e){
                      return "<span class='highlight'>" + e + "</span>";
                   });

$("#div").html(newHtml);

    /(a)(?!([^<])*?>)(?!<script[^>]*?>)(?![^<]*?<\/script>|$)/gi

this.keywords.forEach(keyword => {
  el.innerHTML = el.innerHTML.replace(
    RegExp(keyword + '(?![^<>]*>)', 'ig'),
    matched => `<span class=highlight>${matched}</span>`
  )
})