Convert string of HTML tags to Array? [closed]

Question

Closed. This question needs debugging details. It is not currently accepting answers.

Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.

Closed 5 years ago.

Improve this question

I'm trying to convert a string of HTML to an array of HTML. For example, I might have a string of arbitrary HTML that looks like this:

"<div>This</div><h1>Is</h1> <p>A</p> <a href="#">Test</a>"

(There may or may not be spaces between the tag elements)

I'm trying to convert it into an array that looks like this:

["<div>This</div>", "<h1>Is</h1>", "<p>A</p>", "<a href="#">Test</a>"]

This is just for displaying the tags as text - I'm not going to use them as HTML elements.

I have looked at this example here, and it almost works except it strips the tags from the inner text: https://stackoverflow.com/a/54340630/1282216

I'm looking for a solution that does not involve DOM parsing - if possible.

Any suggestions welcome!

Roko C. Buljan · Accepted Answer · 2020-10-09 17:55:14Z

12

Always use a DOMParser to parse HTML strings.

const string = `<div>This</div><h1>Is</h1> <p>A</p> <a href="#">Test</a>`;

const doc = new DOMParser().parseFromString(string, "text/html");
const HTMLArray = [...doc.body.children].map(el => el.outerHTML);

console.log(HTMLArray)

You should never use RegExp to parse XML/HTML strings. But if you really want, and know your string by hearth and looks as you provided it...

const str = `<div>This</div><h1>Is</h1> <p>A</p> <a href="#">Test</a>`;
const m = str.match(/<[^>]+>[^<]*<\/[^>]+>/g); // Use at your own risk

console.log(m);

Notice that the above will not work for deeply nested HTML, and if inside an attribute there's a < or > character (which is completely valid and not unusual)

edited Oct 9, 2020 at 17:55

answered Oct 9, 2020 at 11:00

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

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

2 Comments

d13 Over a year ago

Thank you very much! I'm actually not parsing real HTML. It's just a string that looks like HTML and is being displayed for presentation purposes (on a WebGL texture).

Roko C. Buljan Over a year ago

@d13 if you don't use nested HTML or XML (the string is exactly as you provided it), you could try the above RegExp, but at your own risk.

Collectives™ on Stack Overflow

Convert string of HTML tags to Array? [closed]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related