具有相同文本的多个值没有获得确切的选定文本偏移量

Question

我有一个类似于 ->

的文本

Lorem Ipsum 只是印刷和排版行业的虚拟文本。自 1500 年代以来，Lorem Ipsum 一直是行业的标准虚拟文本，当时一位不知名的印刷商采用了一种类型的厨房并将其加扰以制作一本类型样本书。它不仅经历了五个世纪，而且经历了电子排版的飞跃，基本保持不变。它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行起来，最近又随着 Aldus PageMaker 等桌面出版软件（包括 Lorem Ipsum 的版本）而普及。

现在，我想突出显示这段文本的某些部分，所以我需要知道字符串的开始和结束偏移量。

我们说

it to make a 

这是我要高亮的文字，所以需要这个文字的偏移量；到目前为止，我尝试使用以下逻辑

var startoffset  = $scope.original_doc_content.indexOf("it to make a ");
var endoffset =  startoffset + string.length;

现在如果it to make a 在给定文本中出现 2 次，我的问题就会发生：如果我想突出显示或想要获取第二个并且如果它出现在第二个之前，那么它会给我第一个偏移量和不是我需要的第二个。那么我该如何解决呢？

Answer 1

您可以通过简单的替换来更轻松地突出显示。

window.onload = function(){
  var str = document.getElementById("mypar").innerText;
  var res = str.replace(/text/g, "<span class=\"highlight\">text</span>");
  document.getElementById("mypar").innerHTML = res;
};

.highlight {
  background-color: yellow;
}

<p id="mypar">This is my text where i want to highlight text or something</p>

或者你可以这样做来获取索引。这可能不是最好的解决方案，但它确实有效。它会遍历单词，直到找不到更多单词并将值记录到控制台。

window.onload = function(){
  var str = document.getElementById("mypar").innerText;
  var indexFirstChar = 0;
  var indexOfLastChar = 0;
  var searchString = "text";
  while(str.indexOf(searchString, indexFirstChar + 1) >= 0) {
     indexFirstChar = str.indexOf(searchString, indexFirstChar + 1);
     indexOfLastChar = indexFirstChar + searchString.length - 1;
     console.log(indexFirstChar);
     console.log(indexOfLastChar);
  }
};

<p id="mypar">This is my text where i want to highlight text or something</p>