Question

选择页面上的所有节点，其中包含特定短语的文本。例如，在DOM结构中有以下节点：

<div class="one">Lorem ipsum dolor sit amet.</div>
<option class="two">Lorem ipsum dolor sit amet.</option>
<div class="three">Example: Lorem ipsum dolor sit amet.</div>
<label class="four">Lorem ipsum dolor sit amet.</label>

我需要选择符合短语的节点＆＃39;示例：＆＃39;。这样的节点可能有任何类或没有人...... 你告诉我如何解决这个问题？

Answer 1

这是一个返回节点文本与正则表达式匹配的元素的函数：

＆＃13;

function getNodeByTextContent(regEx) {
  var all = document.querySelectorAll('*');
  return Array.prototype.slice.call(all).filter(function (el) { 
    return el.textContent.match(regEx);
  });
}

//EG: all nodes where the text begins with 'example'
var matchedNodes = getNodeByTextContent(/^example/i);
for (i = 0; i < matchedNodes.length; ++i) {
  matchedNodes[i].style.color = "green";
}

＆＃13;

<div class="one">Lorem ipsum dolor sit amet.</div>
<option class="two">Lorem ipsum dolor sit amet.</option>
<div class="three">Example: Lorem ipsum dolor sit amet.</div>
<label class="four">Lorem ipsum dolor sit amet.</label>

＆＃13;

Answer 2

我能想到的两个选择

首先是抓住所有节点，然后通过运行测试来循环。

另一种方法是使用XPath来检索节点

//*[contains(., "Example")]

将选择包含字符串的所有元素＆＃34;示例＆＃34;在那里的某个地方

请注意，这将包括父元素（因为它们还包括字符串）如果您想要纯粹的叶元素：

//*[contains(., "Example") and not(child::*)]

会这样做，但不会检索诸如

之类的元素

<p>Example: this is an <em>important</em> example</p>

按文本片段选择页面上的节点

2 个答案: