循环字符串用于document.evaluate()返回意外结果的问题排查

你遇到的核心问题是：XPath表达式里的label被当成了字面量字符串，而不是JavaScript循环中的变量。也就是说，你的代码在找文本内容包含"label"这个单词的<td>，而不是你循环里的"Animal:"或"Human:"，这就是直接写具体字符串能生效、用变量却不行的原因。

下面提供两种可靠的修复方式，同时优化了代码的健壮性：

方案1：用模板字符串拼接XPath（简单直观） #

通过JavaScript模板字符串把变量插入到XPath表达式中，确保XPath能识别到循环中的标签值：

const labels = ["Animal:", "Human:"];

labels.forEach((label) => {
  console.log("Label: " + label);
  // 用模板字符串将变量label插入XPath，注意给字符串加单引号
  const xpath = `//td[contains(text(), '${label}')]/following-sibling::td`;
  const matchingElement = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  
  // 先判断元素是否存在，避免找不到时报错
  if (!matchingElement) {
    console.log(`未找到与${label}对应的元素`);
    return;
  }
  
  // 用textContent获取纯文本，避免innerHTML包含标签干扰判断
  let code = matchingElement.textContent.trim();
  console.log("Code: " + code);
  
  const color = (code === "10" || code === "30") ? "green" : "red";
  // 用模板字符串简化HTML拼接，无需转义引号
  matchingElement.innerHTML = `<span style="color:${color}; font-weight:bold;">${code}</span>`;
  console.log(`Color ${color}`);
});

方案2：XPath变量绑定（更安全，适合特殊字符场景） #

如果标签里包含单引号、特殊字符，模板字符串拼接可能会破坏XPath结构，这时可以用XPath的变量绑定机制传递JS变量：

const labels = ["Animal:", "Human:"];

labels.forEach((label) => {
  console.log("Label: " + label);
  
  const matchingElement = document.evaluate(
    // 用$label表示XPath变量
    '//td[contains(text(), $label)]/following-sibling::td',
    document,
    null,
    XPathResult.FIRST_ORDERED_NODE_TYPE,
    null,
    // 绑定JS变量到XPath变量
    {
      getVariable(name) {
        return name === 'label' ? label : null;
      }
    }
  ).singleNodeValue;
  
  if (!matchingElement) {
    console.log(`未找到与${label}对应的元素`);
    return;
  }
  
  let code = matchingElement.textContent.trim();
  console.log("Code: " + code);
  
  const color = (code === "10" || code === "30") ? "green" : "red";
  matchingElement.innerHTML = `<span style="color:${color}; font-weight:bold;">${code}</span>`;
  console.log(`Color ${color}`);
});

• 变量声明：始终用const/let声明变量，避免全局变量污染。
• 文本匹配范围：如果<td>里有子元素（比如<span>），contains(text(), ...)可能匹配不到，换成contains(., $label)可以匹配整个<td>的所有文本内容。
• 严格相等判断：用===代替==，避免类型转换导致的意外判断错误。

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