如何在JavaScript中对外部传入的字符串使用XPath进行解析

哦，我一眼就看到问题所在啦！你在调用evaluate方法的时候犯了个小疏忽——把上下文节点错误地传入了当前页面的document，而不是你刚用DOMParser解析出来的文档对象，这就是为什么返回null的原因。

正确的实现步骤 #

1. 用DOMParser把外部字符串解析成HTML文档对象
2. 调用这个解析后的文档对象的evaluate方法，上下文节点传入该文档对象本身
3. （可选）用XPathResult的常量代替数字，提升代码可读性

修正后的代码 #

const externalString = "<div>XPath example</div>";
const parser = new DOMParser();
// 解析外部字符串为HTML文档
const parsedDoc = parser.parseFromString(externalString, "text/html");

// 关键：第二个参数传入parsedDoc，而非全局的document
const xpathResult = parsedDoc.evaluate(
  '//div',
  parsedDoc,
  null,
  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, // 用常量代替数字6，可读性更强
  null
);

console.log(xpathResult.snapshotItem(0)); // 现在会输出目标<div>元素

额外说明 #

当你用DOMParser解析text/html类型的字符串时，浏览器会自动补全完整的HTML结构（比如添加<html>、<head>、<body>标签），你的目标<div>其实会被放在<body>标签内。不过//div这种全局XPath查询依然能正常找到它，不需要调整XPath表达式。

内容的提问来源于stack exchange，提问作者saya-ma