如何在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;
}

Answer 2

您可以使用indexOf。

 let str = "This is an example string";
 console.log(str.indexOf("example")) // Would return 11

返回结束索引看看这个问题：JavaScript indexOf from end of search string