Question

我有以下html结构 -

<p>
    <span class="font-weight-medium">
            Phone Number:
    </span>
   <br>
   <span>(123) 456-7869</span>
</p>

现在我想使用纯javascript或css选择器选择所有 span 电话号码。我正在使用 x-ray 。我试过这个，但这似乎不起作用。

  x(html,'span[contains(text(),"Phone Number")]')
  (function(err, obj) {
      console.log(obj);
  });

Answer 1

您可以获取所有span个元素并循环查找包含span的<{1}}之后的下一个Phone Number：

span_tags = document.getElementsByTagName('span');
for (var i=0, max=span_tags.length; i < max; i++) {
  el =  span_tags[i];
  str = el.innerHTML;
  regex = / *Phone Number: */;
  if ( str.match(regex)) {
    console.log(span_tags[i+1].innerHTML);
  }
}

<p>
  <span class="font-weight-medium">
Phone Number:
  </span>
  <span>(123) 456-7869</span>
</p>

我不确定是否有基于CSS选择器的解决方案（:contain是jquery伪选择器）。但是这是使用indexOf的另一种方法：

span_tags = document.getElementsByTagName('span');
for (var i=0, max=span_tags.length; i < max; i++) {
  if (span_tags[i].innerHTML.indexOf("Phone Number:") != -1) {
   console.log(span_tags[i+1].innerHTML);
  }
}

<p>
  <span class="font-weight-medium">
Phone Number:
  </span>
  <span>(123) 456-7869</span>
</p>

Answer 2

如果您使用jQuery很好，那么，这就是答案：

$("span:contains(Phone Number:)~span")

或者

$('span:contains(Phone Number:)').siblings('span')

根据兄弟之一的文本内容选择兄弟dom元素

2 个答案: