CODEWITHSUNDEEP
javascriptregexstring-matching
Alejandro
Alejandro

Reputation: 2326

Regex - grabbing all <li> tags

Let's say that I have a string as so (not HTML-- from backend, I am recieving as string. I just formatted this way to be easier to read the dom tree):

<ul>
    <li>
        <a href="link1">Link1</a>
        <a href="link2>Link2</a>
    </li>
    <li>
        <a href="link3">Link3</a>
        <a href="link4>Link4</a>
    </li>
</ul>

How can I get grab inside li tags and retrieve as so :

[
    [<a href="link1">Link1</a>, <a href="link2>Link2</a>], 
    [<a href="link3">Link3</a>,  <a href="link4>Link4</a>]
]

I am assuming you need regex to achieve this (no jQuery).

Upvotes: 2

Views: 524

Answers (2)

Lalit
Lalit

Reputation: 1369

Try below code :-

  1. I have given id to ul.
  2. After that used query selector to get li of ul.
  3. Then used query selector to get anchor tags of li.

var list = document.getElementById("list");
var li = list.querySelectorAll("li");
//console.log(li);
var result = [];
for(var i = 0; i < li.length; i++){
  var temp = [];
  var anchors = li[i].querySelectorAll("a");
  for(var j = 0; j < anchors.length; j++){
    temp.push(anchors[j].outerHTML);
  }
  result.push(temp);
}
console.log(result);
<ul id="list">
    <li>
        <a href="link1">Link1</a>
        <a href="link2">Link2</a>
    </li>
    <li>
        <a href="link3">Link3</a>
        <a href="link4">Link4</a>
    </li>
</ul>

Upvotes: -2

mplungjan
mplungjan

Reputation: 178059

Wrap the string in a div and access the links using DOM methods. It is NOT recommended to parse HTML with RegEx

var html = `<ul>
  <li>
    <a href="link1">Link1</a>
    <a href="link2">Link2</a>
    </li>
    <li>
        <a href="link3">Link3</a>
        <a href="link4">Link4</a>
  </li>
</ul>`;

var div = document.createElement('div');
div.innerHTML=html;

// version 1 - just get all links in the string/div
var linksCollection = div.querySelectorAll("a"); // will have some more stuff in it

// version 2 loop each LI and then each A
var lis = div.querySelectorAll("li"),liArr = [];
for (var i = 0; i < lis.length; i++) { // querySelectorAll is array-like
  var links = lis[i].querySelectorAll("a"), hrefArr=[];
  for (var j = 0; j < links.length; j++) {
    hrefArr.push(links[i].outerHTML);
  }
  liArr.push(hrefArr);
}
console.log(linksCollection)
console.log(liArr)

Upvotes: 3

Related Questions