在对文本进行一些更改之后将innerText转换为innerHTML

问题描述

我正在遍历innerHTML来查找某个字符串的索引，因此可以向其添加样式标签并突出显示它-为此，我使用类似的东西：

i = htmlText.indexOf(lcSearchTerm,i+1);

问题是，如果我的lcSearchTerm是：

"Find word"

但是如果在innerHTML中，则为：

"<span> Find </span> word"

我找不到字符串的索引，因为找不到我们要查找的字符串。

所以我的想法是在innerText内部找到它并在其中突出显示它。问题是，此后，我需要将其转换回innerHTML以使用更改来更新页面。我应该是这样的：

innerText = "Find word"
innerText = Stylize(innerText)
innerText = "<font style='color:blue; background-color:yellow;'> Find word </font>"

innerHTML = TextToHTML(innerText);
innerHTML = "<body> 
                 <div> 
                     <font style='color:blue; background-color:yellow;'> Find word </font> 
                 </div> 
             </body>"

关于如何做到这一点的任何想法？

解决方法

您可以尝试通过创建函数来剥离标签：

function strip_html_tags(str) {
  if ((str === null) || (str === '')) {
    return '';
  }

  return str.toString().replace(/<[^>]*>/g,'');
}

i = strip_html_tags(htmlText).indexOf(lcSearchTerm,i+1);

假设您要突出显示ID为container的元素中的单词

const el = document.getElementById('container');
el.innerHTML = el.innerHTML.replace(/searchterm/g,(w) => `<font>${w}</font>`)

google-chrome-extension html javascript