How to combine multiple RegEx Objects without multiple try-catch functions

Question

The variable htmlStr may contain different spellings of id:

var htmlStr = "<div id="demo_div"></div>";

var htmlStr = "<div id='demo_div'></div>";

var htmlStr = "<div id=demo_div class="demo"></div>";

var htmlStr = "<div id=demo_div></div>";

How can I write this differently without many try-catch functions? Can I combine the patterns? It works - but does not look pretty.

var idname;
try {
    idname = /(id="(.*?)(\"))/g.exec(htmlStr)[2]
} catch (e) {
    try {
        idname = /(id='(.*?)(\'))/g.exec(htmlStr)[2]
    } catch (e) {
        try {
            idname = /(id=(.*?)(\ ))/g.exec(htmlStr)[2]
        } catch (e) {
            try {
                idname = /(id=(.*?)(\>))/g.exec(htmlStr)[2]
            } catch (e) {
                console.log(e);
            }
        }
    }
}

console.log(idname);

You need something like /id=(?:(["'])([^'"]*)\1|([^\s>]*))/g, loop over all matches by calling exec until no match, and only grab either Group 2 or Group 3 (if Group 3 matched). But it is safer to use a DOM parser to parse HTML. — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Sep 26, 2018 at 10:40
...how about NOT using regex. Take the HTML string, make it into an actual element, check its ID. stackoverflow.com/questions/2522422/… — VLAZ
– VLAZ, Commented Sep 26, 2018 at 10:42

VLAZ · Accepted Answer · 2018-09-26 11:30:09Z

1

You can do this without using regex by simply parsing the HTML.

const htmlStrings = [
  '<div id="demo_div"></div>',
  "<div id='demo_div'></div>",
  "<div id=demo_div class='demo'></div>",
  '<div data-id="not_a_real_id"></div>', //note: doesn't have an ID 
  "<div data-id=not_an_id ID= demo_div></div>", 
  "<div id= demo_div><span id=inner_id></span></div>"
];

function getId(html) {
  const parser = document.createElement('div');
  parser.innerHTML = html;
  
  return parser.firstChild.id;
}

htmlStrings.forEach(x => console.log(getId(x)));

As you can see, you can create an element, put the HTML in it, then grab the first child and check it's ID. It works even if you have another type of attribute like a custom attribute called data-id or if the ID has any kind of capitalisation or even if that div has inner elements or anything else.

This technique won't work with invalid HTML or if you have multiple elements you want the ID of but this is simply to demonstrate it. Once it's parsed into a proper element, you can traverse its hierarchy as you see fit and perform any sort of extraction you need.

answered Sep 26, 2018 at 11:30

VLAZ

29.6k9 gold badges65 silver badges88 bronze badges

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

1 Comment

still Over a year ago

Thank you, that's the safest option for me and fits, because I need a valid HTML anyway.

Lipsum · Accepted Answer · 2018-09-26 10:57:04Z

0

/id=["']?([^\s"'>]+)/g

This will match all four examples.

edited Sep 26, 2018 at 10:57

answered Sep 26, 2018 at 10:46

Lipsum

5463 silver badges6 bronze badges

1 Comment

still Over a year ago

With /\sid=["']?([^\s"'>]+)/g also the other cases work. Use the form anyway with a try-catch, because it can also happen that there is no ID and I want to catch this with an error.

Collectives™ on Stack Overflow

How to combine multiple RegEx Objects without multiple try-catch functions

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related