javascript - 获取与正则表达式匹配的 HTML 单词的 XPATH

Question

有没有办法为每个匹配给定正则表达式的单词获取某种 XPATH？我的意思是导航器向用户显示的文字。这样我就可以单独操作与每个单词对应的 HTML。

Answer 1

There's not a unique XPath to a node ，但这里有一个解决方案，它使用来自 this answer 的函数 cssPath返回包含与正则表达式匹配的文本的元素的 CSS 路径。

var cssPath = function(el) {
  if (!(el instanceof Element))
    return;
  var path = [];
  while (el.nodeType === Node.ELEMENT_NODE) {
    var selector = el.nodeName.toLowerCase();
    if (el.id) {
      selector += '#' + el.id;
      path.unshift(selector);
      break;
    } else {
      var sib = el,
        nth = 1;
      while (sib = sib.previousElementSibling) {
        if (sib.nodeName.toLowerCase() == selector)
          nth++;
      }
      if (nth != 1)
        selector += ":nth-of-type(" + nth + ")";
    }
    path.unshift(selector);
    el = el.parentNode;
  }
  return path.join(" > ");
}

var startElem = document.body;
var items = startElem.getElementsByTagName("*");
for (var i = items.length; i--;) {
  var match = items[i].innerHTML.match(/fox/);
  if (match) {
    var matched = document.createElement('div');
    matched.innerHTML = cssPath(items[i]);
    document.getElementById("matches").appendChild(matched);
  }
}

<div>The quick brown fox</div>
<div>jumped over the lazy dog.</div>
<div>The slow orange ocelot</div>
<div>crawled under the quick fox.</div>
<hr>
<h4>Matches /fox/</h4>
<div id="matches"></div>