CODEWITHSUNDEEP
javascriptregex
Hedge
Hedge

Reputation: 16768

regex that matches and captures headings

I've got this Regex /<h([2-4])>(.+)<\/h[2-4]>/g It matches all h2,h3,h4 and captures the level and heading-text.

Is it good enough or do you see room for improvement in terms of speed and robustness?

Upvotes: 0

Views: 949

Answers (2)

Mouser
Mouser

Reputation: 13304

Do not use regex on HTML. You can use Element.querySelectorAll. Replace Element with a reference to the DOM-element from which you like to select the headings.

var heading = document.querySelectorAll("h2, h3, h4");

QuerySelectorAll (and his brother querySelector) use CSS selectors to select elements from the DOM. You can supply multiple selectors using commas. This will select all h2-4 elements. You can loop them with this code:

Array.prototype.map.call(heading , function(element){
    //do something with the element here.
    console.log(element.textContent); //EXAMPLE, display the text in the element.
});

Since querySelectorAll returns a node list (which is an arrayish object) we can pass it to Array.map (though not directly). We use Array.prototype.map.call to pass the node list to the map function as array. Map loops over every element in the node list.

Upvotes: 2

Avinash Raj
Avinash Raj

Reputation: 174816

Make your regex to do a non-greedy match. And also make the regex to do back-referencing.

/<(h[2-4])>([^<>]+)<\/\1>/g

OR

/<(h[2-4])>((?:(?!<h\d+\b).)+?)<\/\1>/g

DEMO

Upvotes: 1

Related Questions