JavaScript中RegExp匹配DOM元素textContent结果不符合预期

问题原因 #

核心问题是hiking和joffre lakes中间的空白字符不是普通半角空格（ASCII编码32），而是非断空格（即 实体，Unicode编码U+00A0，ASCII编码160）：

• 你的DOM结构中hiking后面紧跟的是 实体，通过textContent获取内容时，该实体会被解析为U+00A0非断空格，和你正则表达式中写的普通空格并不等价。
• 单独匹配joffre lakes能成功，是因为这两个单词中间的空白是普通空格，和正则里的空格一致，所以可以正常命中。

解决方法 #

可以根据你的需求选以下任意一种方案：

• 方案1：用空白元字符\s代替普通空格写正则，\s可以匹配所有类型的空白字符（包括普通空格、非断空格、制表符、换行符等）。注意用RegExp构造函数时需要对\做转义：

// RegExp构造函数写法
document.getElementById("main_keyword").textContent.match(new RegExp("hiking\\sjoffre lakes", "ig"))

// 更简单的正则字面量写法
document.getElementById("main_keyword").textContent.match(/hiking\sjoffre lakes/ig)

• 方案2：如果需要精准匹配非断空格，直接在正则中使用非断空格的Unicode转义\u00a0：

document.getElementById("main_keyword").textContent.match(new RegExp("hiking\\u00a0joffre lakes", "ig"))

• 方案3：先把文本中的所有非断空格统一替换为普通空格，再用原来的正则匹配：

const rawText = document.getElementById("main_keyword").textContent
const formattedText = rawText.replace(/\u00a0/g, ' ')
formattedText.match(/hiking joffre lakes/ig)

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