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

Question

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

nicael · Accepted Answer · 2016-06-17 17:06:24Z

2

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

edited Jun 17, 2016 at 17:06

answered Jun 17, 2016 at 17:02

nicael

19.1k13 gold badges65 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Behseini Over a year ago

Thanks nicael but this is also returning the grab tags as well?

nicael Over a year ago

@Beh If you consider it to be the best answer, please click the checkmark.

Behseini Over a year ago

Sure I was just waiting for 10 Min!

David Thomas · Accepted Answer · 2016-06-17 17:27:09Z

1

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>

answered Jun 17, 2016 at 17:27

David Thomas

254k53 gold badges382 silver badges421 bronze badges

3 Comments

Alexander Dixon Over a year ago

I learned so many things from this one simple answer. Are all the JavaScript/jQuery methods used here cross browser compatible?

David Thomas Over a year ago

They should be, and to my knowledge they are (with the exception of 'old IE' (IE versions 8 and below) due to jQuery's lack of support for those browsers in the 2.x branch. Although I think all the methods used are available in the later branches of the 1.x

Alexander Dixon Over a year ago

stackoverflow.com/a/18326717/5076162 says that textContent is not viable in ie7/8. Please update your code.

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related