krmzv
krmzv

Reputation: 387

Javascript Regex - get div IDs from string html

Consider the following code:

const content = "<div id='x'><h2>Lorem Ipsum</h2> <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p></div>"

let ids = content.match(/id='(.*?)'/g).map((val) => {
    return val.replace(/id='/g,'');
})

And when I do console.log(ids) - I get the output like this 'x\'' but I need only 'x'. I'm wondering how to achive that result, I've tried by randomly changing regex symbols, because I don't know regex at all - and nothing seems to be working.

No jquery please. Thank you in advance

Upvotes: 0

Views: 2584

Answers (3)

KevBot
KevBot

Reputation: 18908

This answer explains an approach to getting DOM information from a string of HTML without the need for Regular Expressions (prone to bugs and errors when parsing DOM).

I am using a simple library (html-fragment) to create a DocumentFragment from the string of HTML. Since that string becomes a simple DOM tree in memory, you can querySelectorAll elements with the id attribute. You can then map the elements to get the array of ids.

const content = "<div id='x'><h2>Lorem Ipsum</h2> <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p></div>";

const fragment = HtmlFragment(content);
let ids = Array
  .from(fragment.querySelectorAll('[id]'))
  .map(el => el.id);

console.log(ids);
<script src="https://unpkg.com/[email protected]/lib/html-fragment.min.js"></script>

Upvotes: 0

G&#252;ven Altuntaş
G&#252;ven Altuntaş

Reputation: 253

when you use dot "." it means everything but you are searching everithing but ' character

const content = "<div id='x'><h2>Lorem Ipsum</h2> <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p></div>"

let ids = content.match(/id='([^' .*?])'/g).map((val) => {
    return val.replace(/id='([^' .*?])'/g,'$1');
})

console.log(ids)

Upvotes: 2

Rush.2707
Rush.2707

Reputation: 683

const content = "<div id='x'><h2>Lorem Ipsum</h2> <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p></div>"

let ids = content.match(/id='(.*?)'/g).map((val) => {
    return val.replace(/id='/g,'').replace("'",'');
})

console.log(ids)

Upvotes: 3

Related Questions