遍历Div子元素加粗指定文本失效，输入框下拉建议匹配文本加粗求助

我来帮你搞定这个下拉建议匹配文本加粗的问题！你遇到的核心问题大概率是直接把带HTML标签的内容当成纯文本插入DOM了，或者替换逻辑没处理好。下面是具体的实现方案，亲测有效：

1. 基础HTML结构 #

先搭好输入框和建议容器的基础结构：

<input type="text" id="searchInput" placeholder="输入关键词...">
<div id="suggestionsContainer" style="margin-top:8px; border:1px solid #eee; padding:8px; border-radius:4px;"></div>

2. 核心JavaScript逻辑 #

这段代码会监听输入框的内容变化，自动生成带加粗匹配文本的下拉建议：

const searchInput = document.getElementById('searchInput');
const suggestionsContainer = document.getElementById('suggestionsContainer');

// 模拟你的建议数据源
const suggestionsList = ['AB CDE', 'ABC XYZ', 'DEF AB', 'GHI JKL', 'ab MNO'];

// 工具函数：转义正则特殊字符（避免输入./*+等字符导致正则报错）
function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

searchInput.addEventListener('input', function() {
  const inputVal = this.value.trim();
  suggestionsContainer.innerHTML = ''; // 清空旧建议

  if (!inputVal) return; // 输入为空时不显示建议

  // 遍历所有建议项，处理匹配文本加粗
  suggestionsList.forEach(item => {
    // 创建正则：全局匹配+不区分大小写（如果要区分大小写去掉i）
    const matchRegex = new RegExp(`(${escapeRegExp(inputVal)})`, 'gi');
    // 把匹配到的部分替换为加粗的span标签
    const highlightedItem = item.replace(matchRegex, '<span style="font-weight:bold; color:#2563eb;">$1</span>');

    // 创建建议项DOM元素
    const suggestionDiv = document.createElement('div');
    suggestionDiv.style.padding = '4px 8px';
    suggestionDiv.style.cursor = 'pointer';
    suggestionDiv.style.borderRadius = '4px';
    suggestionDiv.addEventListener('mouseover', () => suggestionDiv.style.backgroundColor = '#f3f4f6');
    suggestionDiv.addEventListener('mouseout', () => suggestionDiv.style.backgroundColor = 'transparent');
    // 关键！用innerHTML而不是textContent，这样HTML标签才会被解析渲染
    suggestionDiv.innerHTML = highlightedItem;

    suggestionsContainer.appendChild(suggestionDiv);
  });
});

关键注意点 #

• 一定要用innerHTML而非textContent：如果用textContent，<span>标签会被当成纯文本显示，而不会渲染成加粗效果；
• 转义正则特殊字符：如果用户输入了.、*、+这类正则特殊字符，不转义会导致正则表达式失效，所以加个转义函数很有必要；
• 正则修饰符：g确保全局匹配（比如建议项里多次出现输入值的话都能加粗），i实现不区分大小写匹配，不需要的话可以去掉。

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