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

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

然后拼接。

或者只是替换

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

Answer 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>

Answer 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位

突出显示HTML特定的词

3 个答案: