如何用document.evaluate()的XPath选择含撇号的HTML元素？

核心规则 #

XPath中，用单引号包裹的字符串内部，若要表示单引号（撇号），必须写成两个连续的单引号（''）。同时要注意JavaScript字符串的包裹方式，避免转义冲突导致XPath语法错误。

正确实现示例 #

方法1：用双引号包裹XPath表达式（推荐）

这种写法无需额外转义，可读性更高：

const targetItem = document.evaluate(
  "//p[contains(normalize-space(.), '1''000\u00a0g')]",
  document,
  null,
  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
  null,
);
console.log("匹配结果：", targetItem.snapshotItem(0).textContent); // 输出 "1'000 g"

方法2：用单引号包裹XPath表达式（需转义）

如果必须用单引号包裹JS字符串，需要把XPath中的''转义为\'\'，避免JS解析时出错：

const targetItem = document.evaluate(
  '//p[contains(normalize-space(.), \'1\'\'000\u00a0g\')]',
  document,
  null,
  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
  null,
);
console.log("匹配结果：", targetItem.snapshotItem(0).textContent);

对应HTML结构：

<p>1000&nbsp;g</p>
<p>1'000&nbsp;g</p>

错误写法分析 #

• 使用'：XPath匹配的是DOM文本节点的内容，而非HTML源码，HTML实体已被解析为实际的撇号，因此无法匹配。
• 使用\u0027或\'：在JS字符串中会被直接转义为撇号，导致XPath表达式变成'1'000 g'，XPath解析器会认为字符串在第一个撇号处结束，触发语法错误。

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