Question

有没有办法在html标签之间提取文字？例如，如果我有加利福尼亚州的城市名称，每个都在段落标签中单独列出，我是否可以打印出段落标签内显示的文字？

<div class="cities">
    <div><p>Los Angeles</p><h5>Description</h5></div>
    <div><p>San Francisco</p><h5>Description</h5></div>
    <div><p>San Diego</p><h5>Description</h5></div>
    <div><p>Santa Barbara</p><h5>Description</h5></div>
    <div><p>Davis</p><h5>Description</h5></div>
    <div><p>San Jose</p><h5>Description</h5></div>
</div>

我想定位段落标签中的所有城市，但不是h5标签中的描述。预期的输出是：

洛杉矶旧金山圣地亚哥圣巴巴拉戴维斯圣何塞

Answer 1

使用map()功能，您可以获得p中的所有文字，如下所示。

var cities = $('.cities p').map(function () {
    return $(this).text();
}).get().join();

$('.show').html(cities)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cities">
    <div><p>Los Angeles</p><h5>Description</h5></div>
    <div><p>San Francisco</p><h5>Description</h5></div>
    <div><p>San Diego</p><h5>Description</h5></div>
    <div><p>Santa Barbara</p><h5>Description</h5></div>
    <div><p>Davis</p><h5>Description</h5></div>
    <div><p>San Jose</p><h5>Description</h5></div>
</div> 

<h3>All cities</h3>
<div class="show"></div>

Answer 2

您可以使用jQuery通过调用jQuery元素上的text()函数来提取文本。

$(selector).text()

或者您可以使用textContent属性

的常规JS来完成此操作

element.textContent

Answer 3

使用返回数组的选择器$(".cities p")，$.map()，.textContent。要将返回的数组转换为包含数组所有项的单个字符串，可以使用Array.prototype.join(/* delimiter */)

＆＃13;

var cities = $.map($(".cities p"), function(el) {
  return el.textContent
});

console.log(cities, cities.join(" "))

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="cities">
<div><p>Los Angeles</p><h5>Description</h5></div>
<div><p>San Francisco</p><h5>Description</h5></div>
<div><p>San Diego</p><h5>Description</h5></div>
<div><p>Santa Barbara</p><h5>Description</h5></div>
<div><p>Davis</p><h5>Description</h5></div>
<div><p>San Jose</p><h5>Description</h5></div>
</div>

＆＃13;

Answer 4

使用选择器访问项目，html方法从元素中提取值。它html方法也可用于设置该元素的值或内容：

$('.cities >:nth-child(1)').html()

上面的代码将提取第一个元素，您可以插入oterh元素

Answer 5

使用jquery，这可以实现为：

$(".cities").find("p").text();

或者一次取一个

$(".cities p").each(function() {
      var my_cities = $(this).text();
    });

在html元素之间提取文本

5 个答案: