多关键词匹配

正则多关键词匹配解决方案

实现此效果需要将关键词进行排序，长的关键词在前短的在后
例如 ： 文本含有 酒剑仙，剑仙，要先匹配到酒剑仙进行标注

BookWordLists = data.BookWordLists//关键词列表
//此处 translatezh为循环的多个需要关键词标注的文本域
  $('.translatezh').each(function (index, obj) {
      let html = $(obj).html()
      data.BookWordLists.map(item => {
          if(item.old_word&&item.old_word!='i'&&html.indexOf(item.old_word)>-1){
              let div = $('<div></div>')
              let text = $(`<i></i>`).text(item.old_word)
              let innerHtml = div.append(text).html().toString()
              //防止关键词里面有正则关键词
              let old_word = item.old_word.replace(/([\(\)\#\&\^\*\!\[\]\&\.\`\;\'\"\?\\\/\+])/g,'\\'+'$1')
              var reg = new RegExp('(((?!<i>)|(?!'+old_word+').)+)' + old_word + '(((?!<\/i>)|(?!'+old_word+').)+)', "g");
              html = html.replace(reg, '$1' + innerHtml + '$3')
          }
      })
      $(obj).html(html)
  })

为提升速度要匹配的数据最好在数据层进行匹配

translatezhList.map((obj,index)=> {
      data.BookWordLists.map(item => {
          if(item.old_word&&item.old_word!='i'&&obj.indexOf(item.old_word)>-1){
              let div = $('<div></div>')
              let text = $(`<i></i>`).text(item.old_word)
              let innerHtml = div.append(text).html().toString()
              //防止关键词里面有正则关键词
              let old_word = item.old_word.replace(/([\(\)\#\&\^\*\!\[\]\&\.\`\;\'\"\?\\\/\+])/g,'\\'+'$1')
              var reg = new RegExp('(((?!<i>)|(?!'+old_word+').)+)' + old_word + '(((?!<\/i>)|(?!'+old_word+').)+)', "g");
              obj.replace(reg, '$1' + innerHtml + '$3')
          }
      })
  })
//添加title效果
$('.translatezh i').each(function(i,obj){
   let old_word =  $(obj).text()
    data.BookWordLists.map(item => {
        if(item.old_word==old_word){
             $(obj).attr('title',item.new_word)
        }
    })
})

文本域只有一处

let html =  $('.translatezh')html()
data.BookWordLists.map(item => {
     if(item.old_word&&item.old_word!='i'&&html.indexOf(item.old_word)>-1){
         let div = $('<div></div>')
         let text = $(`<i></i>`).text(item.old_word)
         let innerHtml = div.append(text).html().toString()
         //防止关键词里面有正则关键词
         let old_word = item.old_word.replace(/([\(\)\#\&\^\*\!\[\]\&\.\`\;\'\"\?\\\/\+])/g,'\\'+'$1')
         var reg = new RegExp('(((?!<i>)|(?!'+old_word+').)+)' + old_word + '(((?!<\/i>)|(?!'+old_word+').)+)', "g");
         html = html.replace(reg, '$1' + innerHtml + '$3')
     }
 })
 $('.translatezh').html(html)
//添加title效果
$('.translatezh i').each(function(i,obj){
   let old_word =  $(obj).text()
    data.BookWordLists.map(item => {
        if(item.old_word==old_word){
             $(obj).attr('title',item.new_word)
        }
    })
})

针对多个需要关键词标注的文本域要尽可能减少dom操作

let BookWordLists = data.BookWordLists
let chapterlength = chapter_text_info_tomato.length //文本域长度
BookWordLists.map(item=>{
    for(let chapterindex=0;chapterindex<chapterlength;chapterindex++){
        let html = $('.Original_infozh').eq(chapterindex).html()
        if(item&&html.indexOf(item.old_word)>-1){
            console.log(item.old_word)
            if(item.old_word&&item.old_word!='i'){
                let div = $('<div></div>')
                let text = $(`<i></i>`).text(item.old_word)
                let innerHtml = div.append(text).html().toString()
                let old_word = item.old_word.replace(/([\(\)\#\&\^\*\!\[\]\&\.\`\;\'\"\?\\\/])/g,'\\'+'$1')
                var reg = new RegExp('(((?!<i>)|(?!'+old_word+').)+)' + old_word + '(((?!<\/i>)|(?!'+old_word+').)+)', "g");
                html = html.replace(reg, '$1' + innerHtml + '$3')
            }
            $('.Original_infozh').eq(chapterindex).html(html)
        }
    }
})