JavaScript突出显示字符串中的子字符串

62o28rlo  于 2023-02-07  发布在  Java
关注(0)|答案(2)|浏览(147)

我有一个JavaScript字符串,看起来像这样:

  • 从Windows到Linux *

使用JavaScript,如何通过如下所示的子字符串突出显示 * From * 和 * Linux *:

  • 来自Linux *

字符串最后看起来是这样的

<mark>From</mark> Windows to <mark>Linux</mark>

下面是我当前实现的函数,以完成这项工作:

function highlightSearchTerm(string, substring) {
    const regex = new RegExp(`(${substring})`, 'ig');
    return string.replace(regex, '<mark>$1</mark>');
  }

我是这样称呼它的:

highlightSearchTerm("From Windows to Linux", "from linux")

它工作得很好,唯一缺少的是当子串中有不直接相邻的单词时使它工作。
例如,这些子字符串可以工作:

    • 从窗口 *
    • 来自 *
    • 升级到Linux *

而这些则不是(单词在主字符串中不直接相邻):

    • windows Linux *
    • 从至 *
    • Linux来自 *
cvxl0en2

cvxl0en21#

您可以使用管道**|* * 就像上面解释的@Jhecht一样,或者你也可以拆分你的子字符串,并这样做:

function highlightSearchTerm(string, substring) {
  let arr = substring.split(' ');

  arr.forEach(el => {
      const regex = new RegExp(el, 'ig'),
            temp = el;
            
      el = el.replace(regex, `<mark>${el}</mark>`);
      string = string.replace(temp, el);
  })
  return string;
}

let text = document.querySelector('div').innerHTML;

document.querySelector('div').innerHTML = highlightSearchTerm(text, 'From Linux');
<div>From Windows to Linux</div>

这是在文本包含子字符串时返回truefalse的方式
一个二个一个一个

zdwk9cvp

zdwk9cvp2#

简短回答

调用highlightSearchTerm(),在项之间使用管道(|)以获得所需的输出。

更长的答案

答案必须与如何构建正则表达式有关。
该功能

function highlightSearchTerm(string, substring) {
    const regex = new RegExp(`(${substring})`, 'ig');
    return string.replace(regex, '<mark>$1</mark>');
  }

理解所创建的对应RegExp对象的读起来是什么样子,以及它如何等同于我们可能直接写出的表单,这一点很重要。
首先如果我们调用

// assume substring = 'hello';
new RegExp(`(${substring})`, 'ig');
// Equivalent: /(hello)/ig;

请注意,分组项正在查找单词hello
现在,如果我们提供了一个包含多个内容的对象,比如hiyou,那么如果我们将它们作为一个由空格分隔的字符串提供,例如:

const substring = 'hey you';
new RegExp(`(${substring})`,'ig');
// Equivalent: /(hey you)/ig

这不会给出我们想要的结果,因为解析器现在将hey you作为短语查找,而不是查找heyyou
但是,如果我们用管道(|)分隔这些内容,则得到

// assume substring = 'hey|you';
new RegExp(`(${substring})`,'ig');
// Equivalent: /(hey|you)/ig

现在它在字符串中查找heyyou,这是因为RegEx中的管道符是OR。
如果你想扩大搜索范围以搜索多个短语,你可以用竖线分隔每个特定的短语,例如。

new RegExp('(hey|you|that guy)', 'ig');

将搜索单词heyyou以及短语(包括空格)that guy

相关问题