javascript - 如何在 Javascript 中获取字符串突出显示部分的起始和结束索引？

Question

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

let str = "This is an example string";

假设我突出显示单词 example(就像在 Microsoft Word 中，当您想要将单词加粗或加下划线时)，如何在 Javascript 中的字符串 str 内获取该单词的开始和结束索引？如何获取值 11 和 17？

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

上面的字符串将位于可内容编辑的 div 中。

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

Answer 1

虽然您可以尝试获取字符串中单词的开始和结束索引，但用搜索词本身替换您的单词可能会更容易，搜索词本身包含在 HTML 标签中，这将为您突出显示该单词。要实现此目的，您可以将 .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)。要仅匹配示例的独立出现，您可以修改正则表达式以使用单词边界 (\b)

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;
}