如何用简洁XPath实现多条件优先匹配（替代JS多分支逻辑）

问题说明 #

你当前使用的XPath表达式//*[@selected]/@value|//text()会同时返回两个路径的匹配结果，需要实现优先匹配逻辑：优先查找//*[@selected]/@value，当该路径无匹配结果时，再查找//text()，后续还可能添加更多匹配条件，希望替代当前多分支的JavaScript代码。

方法一：用XPath原生逻辑实现优先匹配 #

现代浏览器大多支持XPath 2.0语法，可以直接写一个带优先级的XPath表达式，一次查询就能得到结果：

写法1：节点集过滤式 #

(//*[@selected]/@value)[1] | (//text()[not(//*[@selected]/@value)])[1]

逻辑：先取第一个带@selected属性元素的value属性；如果不存在该属性，再取第一个文本节点。

写法2：if-else直观式 #

if (//*[@selected]/@value) then (//*[@selected]/@value)[1] else (//text())[1]

逻辑：判断是否存在//*[@selected]/@value匹配项，存在则取第一个结果，否则取第一个文本节点。

使用时直接传入表达式即可，无需多次判断：

const result = document.evaluate(
  'if (//*[@selected]/@value) then (//*[@selected]/@value)[1] else (//text())[1]',
  document,
  null,
  XPathResult.FIRST_ORDERED_NODE_TYPE,
  null
).singleNodeValue || '';

方法二：优化JavaScript代码，简化多分支逻辑 #

如果需要兼容不支持XPath 2.0的环境，或者希望后续扩展条件更方便，可以把所有候选路径存入数组，循环遍历直到找到第一个匹配结果：

function getFirstXpathMatch(pathList) {
  for (const path of pathList) {
    const node = document.evaluate(
      path,
      document,
      null,
      XPathResult.FIRST_ORDERED_NODE_TYPE,
      null
    ).singleNodeValue;
    if (node) return node;
  }
  return '';
}

// 使用时按优先级传入路径数组，后续加条件直接往数组里追加即可
const a = getFirstXpathMatch(['//*[@selected]/@value', '//text()']);

两种方法对比 #

• XPath表达式方式：代码更紧凑，一次查询完成，适合现代浏览器环境；
• JS循环方式：兼容性更强，逻辑直观，后续扩展匹配条件只需修改路径数组，维护成本更低。

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