Выделить конкретные слова в HTML

Question

У меня есть задача.Мне нужно выделить конкретные слова в доходе 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);

Отлично работает, но мне нужно другое решение.

Answer 1

Проблема в том решении состоит в том, что он портится, когда подсвечиваемая строка имеет символы «<,>, <» ~ HTML.<a href="https://stackoverflow.com/questions/53551917/convert-string-that-contains-special-chars-to-html"> Вы можете найти его в моем вопросе здесь или Вы можете использовать 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>

Answer 2

Я не использую TypeScript, поэтому я написал бы альтернативное решение для вас и Аттерссона в Javascript

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

Answer 3

Получите координаты как testString.indexOf(keyWord) и testString.indexOf(keyWord)+ keyWord.length.

Затем соедините.

Или просто замените

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