提取 html 元素之间的文本

Extract text between html elements

本文关键字：文本 之间 元素 html 提取      更新时间：2023-09-26

>有没有办法在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 标签中的描述。预期输出为：

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

使用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>

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

$(selector).text()

或者你可以用带有textContent属性的常规JS来做

element.textContent

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

var cities = $.map($(".cities p"), function(el) {
  return el.textContent
});
console.log(cities, cities.join(" "))
<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>

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

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

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

使用jquery，这可以实现为：

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

或一次服用一个

$(".cities p").each(function() {
      var my_cities = $(this).text();
    });
相关文章：