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

Posted 2023-03-05

【中文标题】获取与正则表达式匹配的 HTML 单词的 XPATH

【英文标题】：Get XPATH of the words of an HTML which match a regular expression

【发布时间】：2016-05-12 22:42:19

【问题描述】：

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

【问题讨论】：

我能想到的最简单的解决方案是使用 jQuery 的 :contains() 选择器。当然，这只是在你使用 jQuery 的情况下。

可见而不是什么？ “DOM 路径”是什么意思？您的意思是 XPath 类型的表达式吗？你打算用它做什么？顺便说一句，文本片段（例如单词）无法通过任何方式寻址，无论是 XPath 还是 CSS 选择器。两者都只针对元素。

@torazaburo 是的，我是这个意思。如果我解析单词并将它们转换为元素怎么办？会不会太费时间了？

将单词和短语转换为自己的 HTMl 元素是一个不同的问题；这里有很多关于这个的问题，我相信如果你搜索过，你会发现。

【参考方案1】：

我的解决方案： 在 DOM 中，我将每个单词放在一个新创建的 span 元素中。

<span id="foundword1">
word1
</span>

<span id="foundword2">
word2
</span>

【参考方案2】：

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>