原生JS如何匹配字典value找到对应key并高亮括号内的数字

前置修正 #

先调整你现有代码的两个基础错误：

• 原字典语法不合法，同一个颜色对应的水果需要放到同一数组内，修正后结构如下：

const my_dict = {
  'BLUE': ['ORANGE', 'GRAPE'],
  'YELLOW': ['PINEAPPLE', 'KIWI'],
  // 可自行补充其他颜色和对应水果
  'RED': ['RED APPLE', 'LARGE FRUIT']
}

• 选择多个同类元素需要用document.querySelectorAll，原代码用的querySelector只会返回第一个匹配元素，无法遍历处理所有标签。

完整实现代码 #

做了全场景容错处理，就算对应标签被删除、文本格式不符合、无匹配颜色都不会抛出报错：

function colorFruitNum() {
  // 获取所有目标元素，无匹配元素直接终止执行
  const fruitElements = document.querySelectorAll('.temple')
  if (!fruitElements.length) return

  fruitElements.forEach(el => {
    const rawText = el.textContent.trim()
    // 提取水果名和括号内的数字，格式不匹配直接跳过当前元素
    const matchRes = rawText.match(/^(.*?)\s*\((\d+)\)$/)
    if (!matchRes) return
    
    const fruitName = matchRes[1].trim()
    const number = matchRes[2]
    let targetColor = ''

    // 匹配水果对应的颜色
    for (const [color, fruitList] of Object.entries(my_dict)) {
      if (fruitList.includes(fruitName)) {
        targetColor = color.toLowerCase()
        break
      }
    }
    // 无匹配颜色直接跳过
    if (!targetColor) return

    // 仅给括号内的数字套高亮样式，保留原文本其他内容
    el.innerHTML = `${fruitName} (<span class="${targetColor}">${number}</span>)`
  })
}

// 执行函数
colorFruitNum()

配套CSS示例（按需调整色值） #

.blue { color: #1677ff; }
.yellow { color: #ffc107; }
.red { color: #ff4d4f; }

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