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

Seach words given in HTML textarea, and highlight them in a string with JavaScript

本文关键字：字符串 JavaScript 显示 并用 区域 文本 HTML 单词 搜索      更新时间：2023-09-26

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

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

这样，您就有了足够的信息，可以在各种偏移和长度处正确放置跨度标记。

压平偏移是最困难的部分，这是我的尝试，但我还没有完全测试过

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;
}
相关文章：