Question

我需要在字符串中搜索某些给定的关键字，然后突出显示它们（例如用红色字母写下它们）。我已经尝试过许多不同的方法来解决这个问题，但没有结果。我认为最合乎逻辑的方法是使用关键字创建数组，然后搜索子字符串并将找到的子字符串放在span标记之间，但我在这里遇到问题：如果给定的关键字是 aaa 和 aab ，字符串 aaab 应全为红色。但是在找到 aaa 子字符串并将它们放在span标记之间后，我无法找到 aab 并突出显示它，同时保留前一个子字符串的颜色，因为如果我搜索原始字符串并突出显示新关键字，第一个关键字的范围标记将丢失，或者如果我在新字符串中搜索，则最后两个 a 将与 b <分开/ strong>带有span结束标记。有没有办法，这样做，例如在搜索关键字时忽略HTML标签，或其他什么？

Answer 1

您需要创建一个偏移/长度对的数组。例如，使用“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"]}
]

通过这种方式，您可以获得足够的信息，以便在各种偏移量和长度上正确放置span标签。

展平偏移是最困难的部分，这是我的尝试，但我还没有完全测试它。使用the jsfiddle

进行游戏

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;
}

搜索HTML textarea中给出的单词，并使用JavaScript在字符串中突出显示它们

1 个答案: