如何获取Javascript中突出显示的字符串的开始和结束索引?

时间:2019-09-14 01:42:26

标签: javascript indexing substring selection

说我在Javascript中有以下字符串

let str = "This is an example string";

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

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

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

我应该补充一点,JavaScript通常不是我的强项,以防万一对此的解决方案太基础了。

2 个答案:

答案 0 :(得分:2)

虽然您可以尝试在字符串中获取单词的起始索引和结尾索引,但是用包含在HTML标记中的搜索词本身替换搜索词可能会更容易,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;
}

答案 1 :(得分:-1)

您可以使用indexOf

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

要返回结尾索引,请查看以下问题:JavaScript indexOf from end of search string