如何使用JavaScript配合XPath提取包含指定字符串的JSON-LD数据

你之前的两种写法存在以下问题：

• 第一种写法：
  1. 完全依赖script标签的出现顺序硬写索引取值，只要页面结构调整、JSON顺序变化就会提取错误，没有通用性
  2. XPath快照的索引从0开始计数，你要取第二个script标签应该用snapshotItem(1)，你写的2实际取到的是第三个orange对应的JSON，本身取值逻辑就错误
• 第二种写法：
  1. XPath查询条件没有限定script的type="application/ld+json"属性，可能匹配到其他类型的script标签
  2. 快照返回的匹配结果索引从0开始，你用snapshotItem(1)会尝试取第二个匹配结果，符合条件的只有1个的时候自然返回null
  3. 最终拿到的是script DOM元素对象，需要取textContent属性才能得到里面的JSON字符串

const htmlString = res;
const doc = new DOMParser().parseFromString(htmlString, 'text/html');
// XPath同时限定type属性和内容包含banana
const xpathResult = doc.evaluate(
  "//script[@type='application/ld+json' and contains(text(), 'banana')]",
  doc,
  null,
  6, // 等价于XPathResult.ORDERED_NODE_SNAPSHOT_TYPE
  null
);
const targetScript = xpathResult.snapshotItem(0);
if (targetScript) {
  // 取文本内容就是你要的JSON字符串
  const jsonStr = targetScript.textContent;
  console.log(jsonStr);
  // 如果需要转成JS对象可以加下面这行
  // const jsonData = JSON.parse(jsonStr);
}

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