CODEWITHSUNDEEP
javascriptjquery
Behseini
Behseini

Reputation: 6320

jQuery Grab Text inside a Tag in String Format and Add to Array

I have string which is like 

 Lorem Ipsum is simply dummy text of the printing and typesetting
 industry.<grab> First Item</grab>Lorem Ipsum is simply dummy text of
 the printing and typesetting industry.<grab>Second Item</grab>Lorem
 Ipsum is simply dummy text of the printing and typesetting
 industry.<grab>Third Item</grab>Lorem Ipsum is simply dummy text of
 the printing and typesetting industry.

now I need to grab all text between the <grab>....</grab> tags and add them two an array. I tried this but it didnt go through

var data = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.<grab> First Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<grab>Second Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<grab>Third Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.';

var array = $('<grab>').map(function() {
  return $(this).text();
}).get();
$('body').append(array);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Can you please let me know how to do this

Upvotes: 2

Views: 162

Answers (2)

David Thomas
David Thomas

Reputation: 253318

The easiest way, despite regular expressions being an option, is to simply use DOM parsing (it doesn't seem to matter if the element-type is custom or otherwise):

var data = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry <grab> First Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<grab>Second Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<grab>Third Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.',

    // creating a <div> element with the data string
    // as its innerHTML:
    elem = $('<div />',{
      'html' : data
    }),

    // using find() to retrieve the <grab> elements from
    // within the newly-created <div>, and using map()
    array = elem.find('grab').map(function () {
      // ...to return the trimmed text of each
      // found element:
      return this.textContent.trim();

      // converting the map to an Array:
      }).get();

// appending the joined array (joining the array together
// with a comma-white-space sequence) to the <body>:    
$('body').append(array.join(', '));
// => First Item, Second Item, Third Item


var data = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry <grab> First Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<grab>Second Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<grab>Third Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
    
    elem = $('<div />',{
      'html' : data
    }),
    array = elem.find('grab').map(function () {
      return this.textContent.trim();
      }).get();

$('body').append(array.join(', '));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 1

nicael
nicael

Reputation: 18995

Those are not DOM elements actually, so probably regex would help you.

var data = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.<grab> First Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<grab>Second Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<grab>Third Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.';
var r = /<grab>(.*?)<\/grab>/g;
var grabs = data.match(r).map(function(x){
   return x.replace(r,'$1');
});
console.log(grabs);

Upvotes: 2

Related Questions