如何在Javascript中获得高亮显示的字符串的开始和结束索引?

2022-02-25 00:00:00 indexing selection javascript substring

假设我在Javascript中有以下字符串

let str = "This is an example string";
假设我突出显示Word示例(就像在Microsoft Word中,当您希望将一个单词设置为粗体或带下划线时),如何在Javascript中的字符串str内获得该单词的开始和结束索引?如何获取值11和17?

到目前为止,我尝试的所有操作都失败了,因为我无法获取这些索引。使用子字符串没有任何用处,因为您要么必须已经知道字符串的开始和结束索引,要么必须处理其中所选单词唯一的字符串。

上述字符串将位于可内容编辑的目录中。

我应该补充一点,Javascript通常不是我的强项,以防这个问题的解决方案变得过于简单。

HTMLHTML

虽然您可以尝试获取字符串中单词的开始和结束索引,但用搜索单词本身替换单词可能更容易,推荐答案标记将为您突出显示单词。要实现这一点,您可以将.replace()与您的单词的正则表达式一起使用,以替换字符串中所有出现的给定单词:

let str = "This is an example string and this is the word example again  xxexamplexx";
let word = "example";

str = str.replace(new RegExp(word, 'g'), `<span class="highlight">${word}</span>`);
console.log(str);

document.body.innerHTML = str;
.highlight {
  background: yellow;
}

上面将突出显示单词"example"的所有匹配项,即使它不是独立的(例如:xxxexamplexxx)。要仅匹配独立出现的示例,可以修改正则表达式以使用单词边界()

let str = "This is an example string and this is the word example again  xxexamplexx";
let word = "example";

str = str.replace(new RegExp('\b'+word+'\b', 'g'), `<span class="highlight">${word}</span>`);
console.log(str);

document.body.innerHTML = str;
.highlight {
  background: yellow;
}

相关文章