前端日志个性化渲染方案衍化与设计实现

Hello World!

[
	{ "value": "Hello", "isWorldLike": true},
	{ "value": " ", "isWorldLike": false},
	{ "value": "World", "isWorldLike": true},
	{ "value": "!", "isWorldLike": false}
]

// plan1:
<link>Hel<highlight>lo</highlight></link><highlight> </highlight><link><highlight>W</highlight>orld</link>!

// plan2:
<link>Hel</link><highlight><link>lo</link> <link>W</link></highlight><link>orld</link>!

    wrapSegments(text, expand = true) {
      let remain = null
      // 性能优化：如果文本长度超长，则隐藏超长部分
      if (text?.length > this.foldLimit) {
        if (expand) {
          remain = text.slice(this.foldLimit, text.length)
        }
        text = text.slice(0, this.foldLimit)
        if (!expand) {
          text += '...'
        }
        this.expand = expand === true
      }
      // 获取高亮范围：
      const hlRange = this.getDecorateRanges((text + (remain || '')).toLowerCase(), 0, this.keyword.length - 1).sort((a, b) => a.start - b.start)
      // 获取分词数组：
      const segments = this.segmenter(text)
      if (remain) {
        segments.push({
          segment: remain,
          isWordLike: false
        })
      }

      let result = ''
      let hlIndex = 0 // 扫描到的高亮关键词下标
      let head = 0 // 记录扫描过的分词长度，高亮替换时减掉
      const spanClass = this.logConfig.segmenter ? 'class="quick-search-segment"' : ''
      for (const segment of segments) {
        let str = segment.segment
        let buffer = 0 // 每个分词当中，已经加上的HTML标签的总长度，用来记录偏移量
        let replaceEnd = 0 // replace end: 记录html关键字符转义结尾
        while (hlRange[hlIndex]?.start < head + segment.segment.length) {
          let before = ''
          switch (hlRange[hlIndex].type) {
            case ('bold'):
              before = `<span ${spanClass} style="font-weight: bold; color: red;">`
              break
            case ('keyword'):
              before = `<span ${spanClass} style="${styles[hlRange[hlIndex].index % styles.length]}">`
              break
            case ('query'):
              before = `<span ${spanClass} style="color: red;">`
          }
          const start = hlRange[hlIndex].start - head + buffer
          let end = hlRange[hlIndex].end - head + buffer
          let moveIndex = false
          if (end > buffer + segment.segment.length) {
            end = str.length
          } else {
            moveIndex = true
          }
          // replaceKeyChar：替换HTML关键字符（<、>、&、"）
          const beforeStr = this.replaceKeyChar(str.slice(replaceEnd, start))
          const kwStr = this.replaceKeyChar(str.slice(start, end))

          // 连带包装好的关键词的 从头到当前扫描位置的 字符串
          const tmpStr = `${str.slice(0, replaceEnd)}${beforeStr}${before}${kwStr}</span>`

          // 字符转换、高亮标签增加的长度
          buffer += beforeStr.length - str.slice(replaceEnd, start).length + kwStr.length - str.slice(start, end).length + before.length + 7
          replaceEnd = tmpStr.length

          str = tmpStr + str.slice(end, str.length)
          if (moveIndex) {
            hlIndex++
          } else {
            hlRange[hlIndex].start = head + segment.segment.length
          }
        }
        if (replaceEnd < str.length) {
          str = `${str.slice(0, replaceEnd)}${this.replaceKeyChar(str.slice(replaceEnd, str.length))}`
        }
        if (segment.isWordLike) {
          result += `<span class="quick-search-segment" title="${this.keyValue}">${str}</span>`
        } else {
          result += str
        }
        head += segment.segment.length
      }
      return result
    },

    getDecorateRanges(text, head, hlIndex) {
      if (hlIndex < 0) {
        return []
      }
      const ranges = []
      const keyword = this.keywordMatcher[hlIndex]
      const arr = (text + '').split(keyword.text.toLowerCase())
      let front = 0
      for (let i = 0; i < arr.length; i++) {
        if (i < arr.length - 1) {
          ranges.push({
            start: head + front + arr[i].length,
            end: head + front + arr[i].length + keyword.text.length,
            type: keyword.type,
            index: hlIndex
          })
        }
        ranges.push(...this.getDecorateRanges(arr[i], head + front, hlIndex - 1))
        front += arr[i].length + keyword.text.length
      }
      return ranges
    },

    segmenter(text) {
      if (!this.logConfig.segmenter) {
        return [{
          segment: text,
          isWordLike: false
        }]
      }
      if (this.fieldDataMapping?.isCls || this.keyValue === '@message') {
        return logSegmenter(text, this.fieldDataMapping?.isCls ? CLS_TOKENIZER : undefined)
      }
      const mapping = this.fieldDataMapping ? this.fieldDataMapping[this.keyValue] : null
      if (mapping?.type?.includes('text') && mapping.index === true) {
        return logSegmenter(text, mapping.analyzer?.pattern || undefined)
      } else {
        return [{
          segment: text,
          isWordLike: true
        }]
      }
    },