innerHTML中查找指定字符串时indexOf返回-1的问题咨询

问题根因 #

• HTML实体转义差异：innerHTML返回的内容会自动把特殊字符转译为HTML实体，比如普通空格可能被替换为 、<转译为<、>转译为>，而你从JSON拿到的待匹配文本是原始纯文本，二者字符编码不一致自然匹配失败。你可以通过分别打印待匹配字符和对应位置innerHTML字符的charCodeAt()值，确认是否存在隐形字符、全角半角空格、转义实体的差异。
• 文本被HTML标签拆分：如果你要匹配的字符串跨了多个DOM节点，比如待匹配文本是测试文本，但实际DOM结构是测<span style="color:red">试</span>文本，那innerHTML里的对应内容会包含标签代码，和纯文本的测试文本完全不匹配。
• 空白字符处理不完整：你当前只处理了首尾的普通空格，但文本中间可能存在连续空格、换行符\n、制表符\t、非打断空格等特殊空白字符，JSON和innerHTML中空白字符的格式差异也会导致匹配失败。
• innerHTML修改后污染匹配池：你在循环中每次匹配成功就直接修改txt.innerHTML，后续的匹配都是基于修改后的、插入了span标签的innerHTML，很容易出现匹配错位。

修复方案 #

1. 放弃直接操作innerHTML的匹配方式，改为遍历DOM文本节点做匹配：直接修改innerHTML会清除原有DOM节点的事件绑定，也容易误匹配到HTML标签、属性中的内容，遍历文本节点的方式兼容性和稳定性更高。
2. 匹配前统一格式化两份文本：把待匹配文本和DOM取出的文本都做统一预处理，比如用正则/\s+/g把所有连续空白字符替换为单个普通空格，再做匹配。
3. 调试阶段可以执行如下代码对比字符差异：

// 打印待匹配文本的每个字符和编码
for(let i=0;i<text.length;i++){
  console.log(text[i], text.charCodeAt(i))
}
// 打印innerHTML中疑似位置的每个字符和编码
const checkStr = inner.slice(indexGuess, indexGuess + text.length)
for(let i=0;i<checkStr.length;i++){
  console.log(checkStr[i], checkStr.charCodeAt(i))
}

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