Parse and add a class to outermost div

Question

What can be the regex to parse an html and modify the html such that the outermost 'div' having our custom class?

for example: my input html can be like:

<p><div>sample text<div>this is another div</div></div></p>

I want a result like

<p><div class="myclass">sample text<div>this is another div</div></div></p>

Why would you want to use a Regexp for this? – Pineda Mar 21 '17 at 14:20 — Pineda, Mar 21 '17 at 14:20

Colton · Accepted Answer · 2017-03-21T14:42:42.777

1

Assuming you're manipulating just a raw string that happens to contain html-like syntax, you'll probably want something like this:

var htmlString = '<p><div>sample text<div>this is another div</div></div></p>'

var className = 'test';
var firstDivIndex = htmlString.indexOf('<div') + 4;
var manipulatedHtml = htmlString.substring(0, firstDivIndex) + ' class="' + className + '"' + htmlString.substring(firstDivIndex);

console.log(manipulatedHtml)

This isn't using regex, just simple string manipulation, I'll throw together a codepen for you if you'd like as well

EDIT: Alright, here's an example with the desired functionality, open up your console to see the result - http://codepen.io/csavage1994/pen/PpRNPa

edited Mar 21 '17 at 14:42

answered Mar 21 '17 at 14:36

Colton

218
1
2
10

This is what I want. Thank you. – Stanly Mar 22 '17 at 06:32
Awesome! Would you mind marking this as the accepted answer? :D – Colton Mar 22 '17 at 15:31

Parse and add a class to outermost div

1 Answers1