Question

如何使用jQuery创建选择器，以便可以像这样在html中获取电话号码：

<div class="contact">
  This is the contact info:
  Address: <b>Elm Street</b>
  Phone: <b>911</b>
  Email: <b>info@example</b>
</div>

不幸的是，我无法控制html，并且电话号码并不总是位于contact-div内的第二个b元素中，它也可能是第一个或第三个b。元素。

如何获得文本“ Phone：”之后的第一个b元素？

Answer 1

如何获得文本“ Phone：”之后的第一个b元素？

您可以

使用.html()来获取html文本
.split()“电话：”上的html
将剩余的html转换回jquery对象
使用.find()

直接在.text()上使用正则表达式可能同样容易。

var txt = $(".contact").html();
var part = txt.split("Phone:")[1];
var html = $("<div></div>").html(part);
var phone = html.find("b").first().text();
$("#result").text(phone);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contact">
  This is the contact info:
  Address: <b>Elm Street</b>
  Phone: <b>911</b>
  Email: <b>info@example</b>
</div>
<hr/>
Result: <div id='result'></div>

Answer 2

您可以使用jQuery.text()函数来读取'.contact'div的文本内容，然后可以使用{{3来计算'Phone：'字符串之后的第一个单词的开始和结束索引。 }}函数。最后，电话将成为这两个索引之间的子字符串。

$(function() {
  let contact = $('.contact').text();
  let phoneString = 'Phone: ';
  let phoneStartIndex = contact.indexOf(phoneString) + phoneString.length;
  let phoneEndIndex = contact.substr(phoneStartIndex).indexOf(' ');
  let phone = contact.substr(phoneStartIndex, phoneEndIndex);
  console.log(phone);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contact">
  This is the contact info: Address: <b>Elm Street</b> Phone: <b>911</b> Email: <b>info@example</b>
</div>

Answer 3

另一种方法是使用contents()并过滤文本节点以获取“电话”文本节点，然后对next()使用<b>

const phoneNum = $('.contact').contents().filter(function(){
   return this.nodeType === 3 && this.textContent.includes('Phone')
}).next().text()

console.log('Phone=', phoneNum)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contact">
  This is the contact info:
  Address: <b>Elm Street</b>
  Phone: <b>911</b>
  Email: <b>info@example</b>
</div>
<hr/>
Result: <div id='result'></div>

在文字后找到第一个元素

3 个答案: