HTML高亮度重要字的完成编码

日期:2021-02-27 类型:科技新闻 

关键词:快速建站,网站建设系统,免费网页建站,网站免费建设,建站系统

本认为1个 innerHTML replace 就可以完成的简易实际操作,却遇到了很多的难题。本文就纪录这些难题和最后的完善处理方法, 期待能对有一样遭受的小伙子伴随所协助。只对結果感兴趣爱好的,忽视全过程,立即绕过看結果吧~

常见做法:正则表达式更换

思路:要想高亮度元素,那末必须将重要字提取下来用标识包裹,随后对标识开展款式调剂。应用 innerHTML,或 outHTML, 而不可以应用 innerText,outText。

const regex = new RegExp(keyword,"g")
element.innerHTML = element.innerHTML.replace(regex,"<b class="a">"+keyword+"</b>")
element.classList.add("highlight")

这样做存在的隐得了以下:

  • keyword 假如是 ()\ 等正则表达式目标的重要字可能搭建正则表达式目标不成功。(能够根据转义处理)
  • keyword 假如是1些 HTML 标识如 div 可能对 innerHTML 开展不正确的更换
  • keyword 假如和1些DOM特性名、值同样,也会致使出现异常更换。以下当 keyword 为 test 时,会将 class 名也不正确的更换掉:
<div id="parent">
    <div class="test">test</div>
  </div>

重要字父连接点 element 根据 class 来开展情况染色解决,对初始DOM有1定水平污染,将会对 element 再度精准定位导致危害。(做为软件期待尽量少更改初始DOM)

正则表达式提升1:仅解决坐落于标识内的元素

var formatKeyword = text.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') // 转义解决keyword包括的独特标识符,如 /.
var finder = new RegExp(">.*?"++".*?<") // 提取坐落于标识内的文字,防止误实际操作 class、id 等

element.innerHTML = element.innerHTML.replace(finder,function(matched){
        return matched.replace(text,"<br>"+text+</br>)
})// 对提取的标识内文字开展重要字更换

以能处理大多数数难题,但依然存在的难题是,要是标识特性存在相近 < 标记,可能摆脱配对标准致使正则表达式提取內容不正确, HTML5 dataset 能够自定随意內容,故这些独特标识符是没法防止的。

<div dataset="p>d">更换</div>

正则表达式提升2:消除将会危害的标识

<div id="keyword">keyword</div>
  =》将闭合标识用自变量更换
  [replaced1]keyword[replaced2]//闭合标识内 id="keyword" 不容易被解决
  =》
  [replaced1]<b>keyword</b>[replaced2]
  =》将暂存自变量 replaced 更换为本来标识
  <div id="keyword"><b>keyword</b></div>

这类思路及源代码从这里来, 但存在难题是:

  • 假如 [replaced1] 包括 keyword, 那末更换时将产生出现异常
  • 最关键的,当标识值中包括 <> 标记时,此方式也不可以正确的提取标识

总而言之在历经了N多尝试以后,根据正则表达式都没能合理的解决各种各样状况。随后换了个思路,堵塞过标识符串的方法,根据连接点解决。element.childNodes 能够最合理的清除标识内的影响信息内容。

[完善处理计划方案]根据 DOM 连接点解决

<div id="parent">
    keyword 1
  <span id="child">
    keyword 2
  </span>
 </div>

根据 parent.childNodes 获得全部子连接点。child 连接点能够根据 innerText.replce(keyword,result) 的方法更换获得要想的高亮度实际效果,以下: <span id="child"><b>keyword</b> 2</span> (递归解决:当child连接点不含子连接点时开展replace实际操作)。

可是 keyword 1 是属于文字连接点,只能改动文字內容,没法提升 HTML,更没法独立操纵其款式。而文字连接点也不可以变换为一般连接点,这也是最苦恼的事儿。

最终~,本文的关键来了,由于这个作用,让我第1次用心触碰到了文字连接点这个物品。从这里发现了Text,应用激光切割文字连接点并更换的方法完成高亮度。

源代码和复原高亮度见源代码

const reg = new RegExp(keyword.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'))
highlight = function (node,reg){
    if (node.nodeType == 3) {  //只解决文字连接点
        const match = node.data.match(new RegExp(reg));
        if (match) {
          const highlightEl = document.createElement("b");
          highlightEl.dataset.highlight="y"
          const wordNode = node.splitText(match.index)
          wordNode.splitText(match[0].length); // 激光切割成前 重要词 后3个Text 连接点
          const wordNew = document.createTextNode(wordNode.data);
          highlightEl.appendChild(wordNew);//highlight 连接点搭建取得成功
          wordNode.parentNode.replaceChild(highlightEl, wordNode);// 更换该文字连接点
        }
    } else if (node.nodeType == 1 && node.dataset.highlight!="y"
    ) {
        for (var i = 0; i < node.childNodes.length; i++) {
            highlight(node.childNodes[i], reg);
            i++
        }
    }  
}

最终,留个彩蛋,以上方式也是存在1个小 bug 的,有兴趣爱好能够去发现1下。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。