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

假设我在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;
}