CODEWITHSUNDEEP
javascriptjquery
Mahmud Adam
Mahmud Adam

Reputation: 3579

Extract text between html elements

Is there a way to extract text between html tags? For example, if I had the names of cities in California, each listed separately within paragraph tags, could I print out only the text that appears inside the paragraph tags? 

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

I want to target all of the cities in the paragraph tags but not the descriptions in the h5 tags. The expected output would be:

Los Angeles San Francisco San Diego Santa Barbara Davis San Jose

Upvotes: 0

Views: 1420

Answers (5)

PARDEEP BALOWRIA
PARDEEP BALOWRIA

Reputation: 11

using jquery , this can be achieved as:

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

OR for taking one at a time

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

Upvotes: 0

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

Using map() function you can get all the text in p like following.

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>

Upvotes: 2

George
George

Reputation: 3943

Using the selector to access the item and the html method extracts the value from the element. It html method can also be used to set the value or content of that element:

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

The code above will extract the first element, you can interpolate for the oterh elements

Upvotes: 1

guest271314
guest271314

Reputation: 1

Use selector $(".cities p") , $.map() , .textContent , which returns an array. To convert the returned array into a single string containing all items of the array, you could use 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>

Upvotes: 1

CzechErface
CzechErface

Reputation: 326

You may use jQuery to extract text by calling the text() function on the jQuery element(s).

$(selector).text()

or you may do it with regular JS with the textContent attribute

element.textContent

Upvotes: 1

Related Questions