Wrapping HTML in string form with

Question

I have some HTML represented as a string.

ex:

var testHTMLString = "<div class='a'>test content</div>"

I want to be able to use regex and split this HTML string by its tags and wrap the broken up tag pieces with <span class='red'> and </span> in order to highlight pieces of the HTML string

expected result:

<span class='red'>"<div class='a'>"</span>test content<span class='red'>"</div>"</span>

I can't seem to get the regex correct in my program but in regex testers it seems to work

testHTMLString.split("/<(\/)?div.*?>/g"); is not splitting my HTML string into the pieces I want --> "<div class='a'>" and "</div>"

[You can parse HTML with RegEx if you know what you are going to do](http://stackoverflow.com/a/4234491/1020526) — revo, Sep 17 '16 at 09:09
All I want to do is wrap a targeted HTML tag with `` to highlight it... — Liondancer, Sep 17 '16 at 09:10
You can also try to do it with 'split' / 'join' methods, instead of regex — Telman, Sep 17 '16 at 09:15
So why a valid HTML opening tag alone should be wrapped in `span`? — revo, Sep 17 '16 at 09:18
I am trying to keep the HTML in a string. I want to display it. Not have valid HTML — Liondancer, Sep 17 '16 at 09:23
I didn't even read question while commenting since that comment was easily against yours. @Biffen — revo, Sep 17 '16 at 09:26
After rethinking what I need. I think i need `.split()`. Either way, I still need to look in the HTML string?. input --> `"
test content
"` output --> `"
"test content"
"` — Liondancer, Sep 17 '16 at 09:29
@Liondancer what are you trying to accomplish ? Is it only highlighting text or something more ? — Tomas, Sep 17 '16 at 10:28
@Tomas Just highlight text. This text happens to LOOK like HTML. Imagine c/p page source from a website — Liondancer, Sep 17 '16 at 10:29
I'd be happy if you tell me what is wrong with my provided answer. — revo, Sep 17 '16 at 10:33
OP if you only need wrapping I suggest not using RegExp and using browser's build-in HTML parsing capabilities http://stackoverflow.com/questions/3337587/wrapping-a-set-of-dom-elements-using-javascript @revo using RegExp for HTML parsing is bad practise and in this use-case can be easily avoided. Look a the link above :) — Tomas, Sep 17 '16 at 10:38
Possible duplicate of [RegEx match open tags except XHTML self-contained tags](http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags) — Kevin Kopf, Sep 25 '16 at 05:55

score 0 · Accepted Answer · answered Sep 17 '16 at 09:41

0

You already answered your question. But you forgot to return applied changes:

function highlightTag(pageSource, tag) {
    var re = new RegExp("<(\/)?" + tag + ".*?>", "g");
    newPageSource = pageSource.replace(re, "<span class='red'>" + tag + "</span>");
    return newPageSource;
}

Also that doesn't completely do what you want. This does:

function highlightTag(pageSource, tag) {
    var re = new RegExp("(<\/?" + tag + "[^<>]*>)", "g");
    return pageSource.replace(re, "<span class='red'>\"$1\"</span>");
}

answered Sep 17 '16 at 09:41

revo

47,783
14
74
117

Ahh I see where I went wrong. Thanks. I played around with your modified function and it seems to do what I want. Like I mentioned at first, I actually need `.split()`. I changed it in my function accordingly. Thanks. `split()` will return a list and I can just create some HTML wrapping everything that I need with `` – Liondancer Sep 17 '16 at 10:56

score -3 · Answer 2 · edited May 23 '17 at 12:00

-3

Most of the times you should not use RegExp to parse HTML. Wrapping elements can be easily solved using browser's HTML-parsing capabilities see Wrapping a set of DOM elements using JavaScript

edited May 23 '17 at 12:00

Community

1
1

answered Sep 17 '16 at 10:39

Tomas

1,377
3
17
32

Wrapping HTML in string form with

2 Answers2