JavaScript一次性将多组字符索引对象替换为高亮HTML字符串

核心问题原因 #

之前单类逐次处理的方案失效，本质是插入第一类实体的span标签后，原始文本的字符长度发生了变化，第二类实体仍使用原始索引匹配必然出现错位，还可能生成交叉嵌套的非法HTML结构，导致渲染异常。

实现逻辑 #

• 统一收集所有类别实体：将diseases、drugs等不同类别的实体合并到同一个数组，给每个实体绑定对应的类型、高亮颜色属性。
• 实体排序与冲突处理：先按实体起始索引升序、实体长度降序排序，过滤掉重叠、交叉的冲突实体（病历场景下实体一般互斥，优先保留更长的匹配实体即可，若业务支持嵌套可跳过该过滤步骤）。
• 原始文本预处理：先转义原始文本中的<、>、&等HTML特殊字符，避免特殊字符导致HTML解析错误、XSS风险。
• 一次性倒序插入标签：将过滤后的合法实体按结束索引从大到小排序，从文本末尾往前依次插入span标签，该过程中前置待插入位置的字符索引不会因为后续标签插入发生偏移，完全不需要额外计算偏移量。

可直接运行的代码实现 #

// 实体颜色配置
const indexColor = {
  drugs: 'red',
  diseases: 'green'
}

/**
 * 多类实体一次性高亮处理
 * @param {string} originalText 原始病历文本
 * @param {Object} nerArray 实体抽取结果，key为实体类型，value为对应实体数组
 * @param {Object} colorConfig 实体类型对应高亮颜色配置
 * @returns {string} 带高亮标签的HTML字符串
 */
function renderNerHighlight(originalText, nerArray, colorConfig) {
  // 1. 汇总所有类别的实体
  const allEntities = []
  Object.entries(nerArray).forEach(([type, entityList]) => {
    entityList.forEach(entity => {
      allEntities.push({
        ...entity,
        type,
        color: colorConfig[type]
      })
    })
  })

  // 2. 排序过滤冲突实体
  // 先按起始位置升序，同起始位置的长实体排前面
  allEntities.sort((a, b) => a.start !== b.start ? a.start - b.start : b.end - a.end)
  const validEntities = []
  let lastMatchedEnd = -1
  for (const entity of allEntities) {
    // 跳过和已保留实体重叠的项
    if (entity.start < lastMatchedEnd) continue
    validEntities.push(entity)
    lastMatchedEnd = entity.end
  }

  // 3. 转义原始文本HTML特殊字符
  const escapeHtml = (str) => str.replace(/[&<>"']/g, match => {
    const escapeMap = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;'
    }
    return escapeMap[match]
  })
  let processedText = escapeHtml(originalText)

  // 4. 倒序插入所有高亮标签
  // 按结束位置从大到小排序，从后往前插不会影响前面的字符索引
  validEntities.sort((a, b) => b.end - a.end)
  for (const entity of validEntities) {
    const { start, end, word, color } = entity
    const escapedWord = escapeHtml(word)
    // 校验索引和文本匹配，避免异常数据导致标注错位
    if (processedText.slice(start, end) !== escapedWord) continue
    const prefix = processedText.slice(0, start)
    const highlightContent = processedText.slice(start, end)
    const suffix = processedText.slice(end)
    processedText = `${prefix}<span style="color: ${color}">${highlightContent}</span>${suffix}`
  }

  return processedText
}

// 调用示例
// const nerResult = { diseases: [{word: '高血压', start: 10, end: 13}], drugs: [{word: '硝苯地平', start: 20, end: 24}] }
// const highlightHtml = renderNerHighlight('患者既往高血压病史，规律服用硝苯地平控制血压', nerResult, indexColor)

方案优势 #

• 无索引错位问题：所有标签插入基于原始文本索引，倒序插入逻辑不会改变待插入位置前的字符位置，不需要手动计算索引偏移量，逻辑简单可靠。
• 无非法HTML结构：前置的冲突过滤逻辑可以避免标签交叉、嵌套错误，生成的HTML可以直接渲染。
• 扩展性强：后续新增实体类别只需要在indexColor中添加对应颜色配置即可，不需要修改核心处理逻辑。
• 鲁棒性强：加入了文本匹配校验、特殊字符转义逻辑，避免异常实体数据、特殊字符导致渲染异常。

内容的提问来源于stack exchange，提问作者Vikram Hegde