javascript - 突出显示字符串中的文本

Question

我有一个算法可以根据查询计算要在文本中突出显示的字符。

例如，如果我将文本“1000, Brussels, Belgium”传递给算法，并且查询“1000 bruss”，它会返回我 [[0, 4], [6, 11]] .但是现在，我需要编写一个算法，将字符用 <strong></strong> 包裹起来。 , 所以结果应该是 <strong>1000</strong>, <strong>Bruss</strong>els, Belgium .我写了这个算法，但我觉得它可能会更好，或者它可能会被更优雅地解决。

const highlight = (content, query, matches) => {
  if (!query) {
    return content;
  }

  const openTag = "<strong>";
  const closeTag = "</strong>";

  let result = content;
  let shift = 0;

  matches.forEach(([startIndex, endIndex]) => {
    const s =
      openTag +
      result.slice(startIndex + shift, endIndex + shift) +
      closeTag +
      result.slice(endIndex + shift);

    if (shift) {
      result = result.slice(0, startIndex + shift) + s;
    } else {
      result = s;
    }

    shift += openTag.length + closeTag.length;
  });

  return result;
};

有没有更好的办法解决这个问题？

另一个例子:

• 文本:“荷兰北荷兰省阿姆斯特丹”
• 查询:'amst'
• 匹配项:[0, 4]

Answer 1

您可以按升序对匹配项进行排序，然后您只需取出进行曲之间的部分并将它们连接在一起:

 const highlight = (content, matches) => {
   matches.sort(([a], [b]) => a - b);

  let result = "";
  let prevEnd = 0;
  for(const [start, end] of matches) {
    result += content.slice(prevEnd, start);
    result += "<strong>";
    result += content.slice(start, end);
    result += "</strong>";
    prevEnd = end;
  }
  result += content.slice(prevEnd);
  return result;
}

(假设匹配不重叠，就像 OP 代码一样)

---

或者，您可以将替换留给正则表达式引擎:

 const result = content.replace(new RegExp(query.split(" ").join("|"), "g"), it => `<strong>${it}</strong>`);