搜索HTML文本区域中给定的单词，并使用JavaScript在字符串中突出显示它们

我需要在字符串中搜索一些给定的关键字，然后突出显示它们（例如，用红色字母书写它们）。我尝试了许多不同的方法来解决这个问题，但没有结果。我认为，最合乎逻辑的方法是，用关键字组成一个数组，然后搜索子字符串并将找到的子字符串放在span标记之间，但我这里有一个问题：如果给定的关键字是aaa和aab，则字符串aaab应该都是红色的。但是在我找到aaa子字符串并将它们放在span标记之间之后，我无法找到aab并突出显示它，同时保留上一个子字符串的颜色，因为如果我搜索原始字符串并突出显示新关键字，第一个关键字的span标记将丢失，或者如果我搜索新字符串，最后两个a将与b用跨度末端标签分开。

---

有什么方法可以做到这一点，例如，在搜索关键字时忽略HTML标记，或者做其他事情吗？

您需要创建一个偏移量/长度对数组。例如，使用“foo aaab bar aaa”，您将获得以下数组：

[
  {offset: 4, length: 3, keyword: "aaa"},
  {offset: 5, length: 3, keyword: "aab"},
  {offset: 12, length: 3, keyword: "aaa"}
]

然后需要遍历此阵列并展平重叠部分，从而产生：

[
  {offset: 4, length: 4, keywords: ["aaa", "aab"]},
  {offset: 12, length: 3, keywords: ["aaa"]}
]

这样，您就有足够的信息在不同的偏移和长度处正确放置跨度标记

平整偏移量是最困难的部分，下面是我的尝试，但我还没有完全测试它。玩弄

函数偏移量（xs）{
var out=[]；
var alreadyProcessed=[]；
forEach（函数（x，i）{
如果（已处理。索引为（x）！=-1）{
返回；
}
var xStart=x.offset，xEnd=x.offset+x.length；
var fixed={offset:x.offset，length:x.length，关键字：[x.keyword]}；
var matches=xs.slice（i+1）.filter（函数（y）{
var yStart=y.offset，yEnd=y.offset+y.length；
var overlapper=xStart
function flattenOffsets(xs){
    var out = [];
    var alreadyProcessed = [];

    xs.forEach(function(x, i){
        if (alreadyProcessed.indexOf(x) !== -1) {
            return;
        }

        var xStart = x.offset, xEnd = x.offset+x.length;
        var fixed = {offset: x.offset, length: x.length, keywords: [x.keyword]};
        var matches = xs.slice(i+1).filter(function(y){
            var yStart = y.offset, yEnd = y.offset+y.length;

            var overlapBefore = xStart <= yStart && xEnd <= yEnd && xEnd >= yStart;
            var overlapAfter = yStart <= xStart && yEnd <= xEnd && yEnd >= xStart;
            var contains = yStart >= xStart && yEnd <= xEnd;
            var contained = xStart >= yStart && xEnd <= yEnd;    

            return overlapBefore || overlapAfter || contains || contained;
        }).sort(function(a,b){
            return b.offset - a.offset;
        })
        .forEach(function(y){
            fixed.offset = Math.min(x.offset, y.offset);
            fixed.length = Math.max((x.offset + x.length), (y.offset + y.length)) - fixed.offset;
            fixed.keywords.push(y.keyword);
            alreadyProcessed.push(y);
        });

        out.push(fixed);
        alreadyProcessed.push(x);
    });

    return out;
}