Javascript Regex Replace Text between Markers?

Question

I have a start and end marker in html, I would like to replace the html between these markers with some other html. The expression below doesnt seem to work...

var myRegExp = new RegExp("<!-- " + "START IMPORTED HEAD.*?<!-- " + "END IMPORTED HEAD -->", "gi");
sHtmlContent = sHtmlContent.replace(myRegExp, "<!-- " + "INSERT_HEADER -->");

below is an example of the html block which appears in doc.

<!-- START IMPORTED HEAD -->
<style type="text/css">   
    input[type=button]
    {       
        padding-bottom: 3px;
    }        
</style>
<!-- END IMPORTED HEAD -->

any ideas would be great thanks

You should be using DOM manipulation for this. Don't know what the DOM is? Go learn about it! Now! ... You're back? Using the DOM seems like a lot of work for something so simple? Go learn jQuery! ;) — R. Martinho Fernandes
– R. Martinho Fernandes, Commented Feb 7, 2011 at 15:42
ok how would you suggest I do it via the DOM? thanks great help — keyoke
– keyoke, Commented Feb 7, 2011 at 15:45

Phrogz · Accepted Answer · 2011-02-07 15:58:07Z

2

Manipulating the DOM is much better, but only if you have a browser. If you're doing server-side JavaScript (e.g. JS ASP) here's a way to do exactly what you asked:

var html = '<!-- START IMPORTED HEAD -->\n<style type="text/css">\n    input[type=button]\n    {\n        padding-bottom: 3px;\n    }\n</style>\n<!-- END IMPORTED HEAD -->';
var re   = new RegExp("<!-- " + "START IMPORTED HEAD[\\d\\D]*?<!-- " + "END IMPORTED HEAD -->", "gi");

html.replace(re, "<!-- " + "INSERT_HEADER -->");
// <!-- INSERT_HEADER -->

Your problem is that in JS the . character does not match newlines; using a [\d\D] character class instead matches all characters.

answered Feb 7, 2011 at 15:58

Phrogz

304k115 gold badges669 silver badges758 bronze badges

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

1 Comment

Phrogz Over a year ago

Alternatively, JavaScript supports a negated empty character class for the same effect: [^]

morja · Accepted Answer · 2011-02-07 15:52:42Z

2

The problem are the newlines in your doc. Javascript does not support multiline (dot match all) matching out of the box. Either you remove the newlines first or you use an extension like XRegexp

See here: regexpal and then click the Dot matches all.

answered Feb 7, 2011 at 15:52

morja

8,5703 gold badges43 silver badges62 bronze badges

Comments

R. Martinho Fernandes · Accepted Answer · 2011-02-07 15:53:43Z

1

Using the DOM is a much more robust solution to your problem. Instead of using comment markers, just place that section of HTML inside a div with a known id:

<div id="foo">Original things</div>

With jQuery, you can do the replacement in a single line:

$('div#foo').html('Replaced things')

This will change the content of the div into:

<div id="foo">Replaced things</div>

answered Feb 7, 2011 at 15:53

R. Martinho Fernandes

236k73 gold badges443 silver badges518 bronze badges

2 Comments

Phrogz Over a year ago

@keyoke You posted that you are looking for a regex-based solution and then you accept this? :)

keyoke Over a year ago

thanks for your reply as I did ask for a regex based solution, I have changed the correct answer I selected, but both seem to work in my situation

Collectives™ on Stack Overflow

Javascript Regex Replace Text between Markers?

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related