突出显示 HTML 中的特定单词答案

【问题标题】：Highlight specific words in HTML突出显示 HTML 中的特定单词
【发布时间】：2019-06-24 20:01:41
【问题描述】：

我有一个任务。我需要突出显示收入 HTML 中的特定单词。要找到确切的单词，我需要使用它的坐标。坐标是根据单词在字符串中的首尾字母位置计算的。

例子

我有这样的常数

const exmpleString: string = `<h1>Name</h1> <p>Some some, text some.</p>`;

我需要突出显示单词text。它的坐标是 [28,31] - 因为第一个 t 在字符串中的位置 28 上，最后一个 t 在位置 31 上。

我发现了如何使用正则表达式。

const testString: string = 'some some some text some some text';
const keyWord: string= 'text';
const regexRule: any = new RegExp(keyWord, 'g');

const result: string = testString.replace(regexRule, `<span class="some">${keyWord}</span>`);
console.log(result);

效果很好，但我需要其他解决方案。

【问题讨论】：

为什么不想使用正则表达式的解决方案？
如果字符串之前已经有HTML格式，你应该考虑到关键字可能出现在你不能或不想突出显示的字符串的位置。例如，如果关键字是“div”怎么办？或者当关键字出现在标签的标题属性或引用图像的文件名等时会发生什么。
是的，你是对的。正则表达式的方式很棒，但在我的情况下，重点是避免它（

标签： javascript html css angularjs typescript

【解决方案1】：

获取坐标为testString.indexOf(keyWord) 和testString.indexOf(keyWord)+ keyWord.length。

然后拼接。

或者直接替换

testString.replace(keyWord, `<span class="some">`+keyWord+`</span>`)

【讨论】：

【解决方案2】：

该解决方案中的问题是，当要突出显示的字符串具有“,&lt”~ HTML 字符时，它会变得混乱。 you can find it in my question here 或者你可以使用 mark.js - https://markjs.io/

var context = document.querySelector(".context");
var instance = new Mark(context);
instance.mark('line');

<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.10.0/mark.min.js"></script>


<div class="context">
this is a test line used to explain mark.js
</div>

【讨论】：

他只需要突出显示单个单词，所以没有问题。

【解决方案3】：

我不使用 TypeScript，所以我会用 Javascript 为您和 attersson 编写一个替代解决方案

const HighlightedText = (start, end, givenString) => {
  let someString = givenString.split("")
  let highlightedText = []
  for (let i=start; i<=end; i++) {
    highlightedText.push(someString[i+1])
  }
   return highlightedText
}


let HighlightText = HighlightedText(28, 31, "some some some text some some text")

console.log(HighlightText)

然后您可以突出显示它。

Ps：我不确定t 在28 位

的位置如何

【讨论】：

谢谢）但是我怎样才能在原始字符串中突出显示该单词呢？