hightlight-keyword/index.js

hightlight keyword plug-in unit a hight [3~[3~[3~[3~[3~[3~[3~[3~[3~[3~[3~[3~[3~[3~[3~

import {getFinalKeyWords,getFinalSourceText} from './index'

let initialvalue = {
    style:'background:yellow;color:#303133;cursor: pointer;padding:0 3px',
    isCancel:false,
    excluded:null,
    imagesUrl:'https://pic2.zhimg.com/80/v2-c03c31418f3a4c3a79e8182b94f5deba_720w.jpg?source=1940ef5c',
}
/**
 *
 * @param {*} sourceText 读取的文本
 * @param {*} keyWords  关键词，可以是数组和字符串
 * @param {*} isCancel 是否取消高亮，true就不高亮
 * @param {*} excluded 排除某个规则
 */
export function hightlight (params) {
    'use strict'
    Object.assign(initialvalue,params)
    let options = initialvalue

    let {
        sourceText,
        keyWords,
        isCancel,
        excluded,
        style,
        imagesUrl
    } = options

    switch (true){
        case !sourceText:
            throw new Error('缺少参数 sourceText')
            return  ''
        case !keyWords:
            throw new Error('缺少参数 keyWords')
            return  ''
    }
    
    if (sourceText && typeof (sourceText) === 'string') {
        sourceText = sourceText.replace(new RegExp(' ', 'g'), '❤')
    } else {
        return ''
    }

    sourceText = sign(sourceText,keyWords, excluded)
    isCancel = isCancel || false
    if (isCancel) {
        return getHtmlText(sourceText)
    }
    // 设置高亮词默认样式
    let leftStyle = '<label style="' + style + '" >'
    let rightStyle = '</label>'

    let finalSourceText = getFinalSourceText(sourceText)
    // 获取关键字数组
    let finalkeyWords = getFinalKeyWords(keyWords)
    if (finalkeyWords.length === 0) {
        return getHtmlText(finalSourceText)
    }
    // 确定换位符
    let separations = [
        { left: '§', right: '№' },
        { left: '▲', right: '★' },
    ]
    let currentSeparation = null
    for (let i = 0; i < separations.length; i++) {
        let item = separations[i]
        if (finalSourceText.indexOf(item.left) === -1 && finalSourceText.indexOf(item.right) === -1) {
        if (finalkeyWords.some(val => { return val.indexOf(item.left) === -1 && val.indexOf(item.right) === -1 })) {
            currentSeparation = item
            break
        }
        }
    }
    if (currentSeparation === null) {
        return getHtmlText(finalSourceText)
    }

    // 替换内容
    finalkeyWords.forEach((value, index) => {
        if (typeof (value) === 'string' && value !== '') {
        let regExp = value.replace(new RegExp('\\\\', 'g'), '\\\\')
        regExp = regExp.replace(new RegExp('\\*', 'g'), '\\*')
        regExp = regExp.replace(new RegExp('\\.', 'g'), '\\.')
        regExp = regExp.replace(new RegExp('\\[', 'g'), '\\[')
        regExp = regExp.replace(new RegExp('\\]', 'g'), '\\]')
        regExp = regExp.replace(new RegExp('\\(', 'g'), '\\(')
        regExp = regExp.replace(new RegExp('\\)', 'g'), '\\)')
        regExp = regExp.replace(new RegExp('\\<', 'g'), '\\<')
        regExp = regExp.replace(new RegExp('\\>', 'g'), '\\>')
        regExp = regExp.replace(new RegExp('\\:', 'g'), '\\:')
        regExp = regExp.replace(new RegExp('\\?', 'g'), '\\?')
        regExp = regExp.replace(new RegExp('\\!', 'g'), '\\!')
        regExp = regExp.replace(new RegExp('\\-', 'g'), '\\-')
        regExp = regExp.replace(new RegExp('\\^', 'g'), '\\^')
        regExp = regExp.replace(new RegExp('\\$', 'g'), '\\$')
        regExp = regExp.replace(new RegExp('\\|', 'g'), '\\|')
        regExp = regExp.replace(new RegExp('\\=', 'g'), '\\=')
        regExp = regExp.replace(new RegExp('\\{', 'g'), '\\{')
        regExp = regExp.replace(new RegExp('\\}', 'g'), '\\}')
        regExp = regExp.replace(new RegExp('\\+', 'g'), '\\+')
        let newValue = currentSeparation.left + value + currentSeparation.right
        finalSourceText = finalSourceText.replace(new RegExp(regExp, 'g'), newValue)
        }
    })
    finalSourceText = finalSourceText.replace(new RegExp(currentSeparation.left, 'g'), leftStyle)
    finalSourceText = finalSourceText.replace(new RegExp(currentSeparation.right, 'g'), rightStyle)

    return getHtmlText(finalSourceText,imagesUrl)
}


/**
 * 渲染文字
 * @param {*} sourceText 
 * @returns 
 */
function getHtmlText (sourceText,imagesUrl) {
  if (sourceText) {
    sourceText = sourceText.replace(new RegExp('\\r\\n', 'g'), '<br/>')
    sourceText = sourceText.replace(new RegExp('\\r', 'g'), '<br/>')
    sourceText = sourceText.replace(new RegExp('\\n', 'g'), '<br/>')
    sourceText = sourceText.replace(new RegExp('❤', 'g'), '&nbsp')
      if(imagesUrl){
          sourceText = sourceText.replace(new RegExp('♣', 'g'),
              `<a id="click" style=\'cursor:pointer;\'   onclick=\'keyClickEvent(event)\'>`)
          sourceText = sourceText.replace(new RegExp('☀', 'g'),
              `<img style=\'width: 20px;height:20px;border-radius: 15px;overflow: hidden\' 
                src=${imagesUrl} 
                class="identity"></a>`
          )
      }
    return sourceText
  } else {
    return ''
  }
}


/**
 * 将文本验证
 * @param {*} sourceText 验证的文本
 * @param {*} excluded 排除的规则
 */
function sign (sourceText,keyWords, excluded) {
  if (sourceText === undefined || sourceText === '') {
    return ''
  }
  let result = sourceText

  if(!keyWords) return  sourceText

  result = result.replaceAll(
      keyWords,
    function (value) {

        if (value === excluded) {
            return value
        }
        
        let newValue = '♣' + value + '☀'
        return newValue
    })

  return result
}