Get ALL sub-strings between delimiters in one large string

Question

So I am parsing a string with HTML content inside of it like this ( simplified for the purposes of the example )

var htmlProd = "this is <div> my test </div> string <div> I want to extract this </div>

Ideally, I would like to be able to extract the two sub-strings within the divs into an array with the end result being.

myStrings = ["my test","I want to extract this"]

I have tried a few things but I am stumped. This is what I have so far. I am having trouble getting each substring, I have only found solutions to get one.

var myStrings = htmlProd.match(">(.*)<");

Any help would be appreciated greatly. I would be able to use either JQuery or javascript in the solution.

Related: _[You can't parse X/HTML with regex.](https://stackoverflow.com/a/1732454/6634591)_ — Luca Kiebel, Sep 04 '18 at 16:34
Just a hunch - take a look at some other JS implementations of HTML parsers: https://stackoverflow.com/questions/10585029/parse-an-html-string-with-js — WillardSolutions, Sep 04 '18 at 16:35

Zakaria Acharki · Answer 1 · 2018-09-04T17:29:17.087

Since you're using jQuery you could consider the string as an HTML tag and do it like below.

Suggestion using jQuery

var container = $('<div>').html("this is <div> my test </div> string <div> I want to extract this </div>");

var myStrings = container.find('div').map(function() {
  return $(this).text().trim();
}).get();

console.log(myStrings);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Suggestion using Regex

var myStrings = "this is <div> my test </div> string <div> I want to extract this </div>".match(/<div>(.*?)<\/div>/gm);

$.each(myStrings, function(i, v) {
  myStrings[i] = v.replace(new RegExp("<div>", 'g'), "").replace(new RegExp("</div>", 'g'), "");
});

console.log(myStrings);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Check this one using Regex. – Zakaria Acharki Sep 04 '18 at 17:01 — Zakaria Acharki, Sep 04 '18 at 17:01

score 1 · Accepted Answer · answered Sep 04 '18 at 16:37

You can take a different approach here. Since it's an HTML string you are looking at, you can load it up as the HTML content of a temporary element and then use the DOM to get the content.

var htmlProd = "this is <div> my test </div> string <div> I want to extract this </div>";

// Create a temporary element as a container for the html string
let temp = document.createElement("section");

// Load the string into the container
temp.innerHTML = htmlProd;

// Use the DOM to extract the strings within the <div> elements...

// First, get the div elements into a node list
let divs = temp.querySelectorAll("div");

// Now, iterate the nodes and place the contents into a new array
let results = Array.prototype.slice.call(divs).map(function(div){
  return div.textContent;
});

// Results
console.log(results);

this is just what i needed. I was assuming that i may need to treat it as HTML but did not know a proper way to do so. This made it clear — chris, Sep 04 '18 at 16:53

charlietfl · Answer 3 · 2018-09-04T16:48:20.947

Using a jQuery map() by passing the html string to empty element and traversing that element

var htmlProd = "this is <div> my test </div> string <div> I want to extract this</div>"


var txtArr = $('<div>').html(htmlProd)
                      .find('div')
                      .map(function(_,el){return el.textContent.trim()})
                      .get();
console.log(txtArr)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

score 0 · Answer 4 · answered Sep 04 '18 at 16:50

Another way to do it using regex,

const regex = /<div>(.*?)<\/div>/gm;
const str = `this is <div> my test </div> string <div> I want to extract this </div>`;
let m;
let myStrings = [];
while ((m = regex.exec(str)) !== null) {
  // This is necessary to avoid infinite loops with zero-width matches
  if (m.index === regex.lastIndex) {
    regex.lastIndex++;
  }

  // The result can be accessed through the `m`-variable.
  m.forEach((match, groupIndex) => {
    if (groupIndex == 1)
      myStrings.push(match.trim());
  });
}

console.log(myStrings)

Regex: https://regex101.com/r/hMIidd/1

Get ALL sub-strings between delimiters in one large string

4 Answers4