Remove HTML comments with Regex, in Javascript

Question

I've got some ugly HTML generated from Word, from which I want to strip all HTML comments.

The HTML looks like this:

<!--[if gte mso 9]><xml> <o:OfficeDocumentSettings> <o:RelyOnVML/> <o:AllowPNG/> </o:OfficeDocumentSettings> </xml><![endif]--><!--[if gte mso 9]><xml> <w:WordDocument> <w:View>Normal</w:View> <w:Zoom>0</w:Zoom> <w:TrackMoves/> <w:TrackFormatting/> <w:HyphenationZone>21</w:HyphenationZone> <w:PunctuationKerning/> <w:ValidateAgainstSchemas/> <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid> <w:IgnoreMixedContent>false</w:IgnoreMixedContent> <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText> <w:DoNotPromoteQF/> <w:LidThemeOther>NO-BOK</w:LidThemeOther> <w:LidThemeAsian>X-NONE</w:LidThemeAsian> <w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript> <w:Compatibility> <w:BreakWrappedTables/> <w:SnapToGridInCell/> <w:WrapTextWithPunct/> <w:UseAsianBreakRules/> <w:DontGrowAutofit/> <w:SplitPgBreakAndParaMark/> <w:EnableOpenTypeKerning/> <w:DontFlipMirrorIndents/> <w:OverrideTableStyleHps/> </w:Compatibility> <m:mathPr> <m:mathFont m:val="Cambria Math"/> <m:brkBin m:val="before"/> <m:brkBinSub m:val="&#45;-"/> <m:smallFrac m:val="off"/> <m:dispDef/> <m:lMargin m:val="0"/> <m:rMargin m:val="0"/> <m:defJc m:val="centerGroup"/> <m:wrapIndent m:val="1440"/> <m:intLim m:val="subSup"/> <m:naryLim m:val="undOvr"/> </m:mathPr></w:WordDocument> </xml><![endif]-->

..and the regex I am using is this one

html = html.replace(/<!--(.*?)-->/gm, "")

But there seems to be no match, the string is unchanged.

What I am missing?

The whole string is a comment hence everything is replaced by "" — Chandu, Apr 13 '11 at 17:42
As @Cybernate says, the regex *does* work on that text, so what gives? All the responders are assuming there are newlines in the text, which would explain the problem, but I don't see any newlines. — Alan Moore, Apr 13 '11 at 21:42
possible duplicate of [is it possible to remove an html comment from dom using jquery](http://stackoverflow.com/questions/2364601/is-it-possible-to-remove-an-html-comment-from-dom-using-jquery) — Bohdan Lyzanets, Jul 04 '14 at 10:13
https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454 — Iłya Bursov, Jul 24 '17 at 17:12
2019: I write goode solution that remove js and html comment [here](https://stackoverflow.com/a/57809519/1919821) — pery mimon, Sep 11 '19 at 09:15

Mike Samuel · Accepted Answer · 2016-02-29T20:27:17.593

92

The regex //g should work.

You're going to kill escaping text spans in CDATA blocks.

E.g.

<script><!-- notACommentHere() --></script>

and literal text in formatted code blocks

<xmp>I'm demoing HTML <!-- comments --></xmp>

<textarea><!-- Not a comment either --></textarea>

EDIT:

This also won't prevent new comments from being introduced as in

<!-<!-- A comment -->- not comment text -->

which after one round of that regexp would become

<!-- not comment text -->

If this is a problem, you can escape < that are not part of a comment or tag (complicated to get right) or you can loop and replace as above until the string settles down.

Here's a regex that will match comments including psuedo-comments and unclosed comments per the HTML-5 spec. The CDATA section are only strictly allowed in foreign XML. This suffers the same caveats as above.

var COMMENT_PSEUDO_COMMENT_OR_LT_BANG = new RegExp(
    '<!--[\\s\\S]*?(?:-->)?'
    + '<!---+>?'  // A comment with no body
    + '|<!(?![dD][oO][cC][tT][yY][pP][eE]|\\[CDATA\\[)[^>]*>?'
    + '|<[?][^>]*>?',  // A pseudo-comment
    'g');

edited Feb 29 '16 at 20:27

answered Apr 13 '11 at 18:49

Mike Samuel

118,113
30
216
245

How would you modify this to get the comments only, and remove the html ? – guiomie Jul 25 '13 at 18:28
@guiomie, I don't understand your goal. Please explain in more detail? – Mike Samuel Jul 25 '13 at 20:00
1

@MikeSamuel Your last code snippet misses two backslash escapes around the CDATA. – Christian Semrau Feb 29 '16 at 17:15
@ChristianSemrau, Thanks. Fixed I think. – Mike Samuel Feb 29 '16 at 20:27
Its very nice yo. – Kousher Alam Aug 24 '17 at 04:45
Works perfectly in sublime regex too... Thanks – Vishal Kumar Sahu Sep 22 '17 at 16:27
1

Example usage please? – HerrimanCoder Sep 24 '17 at 14:14
1

This is a nice solution thanks. I am trying to modify it to catch comments that are spread across multiple lines. Any ideas on that? Worth a new question? – roman Jan 02 '19 at 10:42
@roman, It should work for comments that contain newlines. Do you mean something different? – Mike Samuel Jan 04 '19 at 00:10

score 10 · Answer 2 · answered Sep 18 '19 at 15:38

10

This is based off Aurielle Perlmann's answer, it supports all cases (single-line, multi-line, un-terminated, and nested comments):

/(<!--.*?-->)|(<!--[\S\s]+?-->)|(<!--[\S\s]*?$)/g

https://regex101.com/r/az8Lu6/1

answered Sep 18 '19 at 15:38

Zach Bloomquist

5,309
29
44

score 4 · Answer 3 · answered Nov 28 '18 at 19:30

4

this works also for multiline - ()|()

answered Nov 28 '18 at 19:30

Aurielle Perlmann

5,323
1
15
26

score 4 · Answer 4 · answered Apr 13 '11 at 18:42

You should use the /s modifier

html = html.replace(//sg, "")

Tested in perl:

use strict;
use warnings;

my $str = 'hello <!--[if gte mso 9]><xml> <o:OfficeDocumentSettings> <o:RelyOnVML/> <o:AllowPNG/> </o:OfficeDocumentSettings> </xml><![endif]--><!--[if gte mso 9]><xml> <w:WordDocument> <w:View>Normal</w:View> <w:Zoom>0</w:Zoom> <w:TrackMoves/> <w:TrackFormatting/> <w:HyphenationZone>21</w:HyphenationZone> <w:PunctuationKerning/> <w:ValidateAgainstSchemas/> <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid> <w:IgnoreMixedContent>false</w:IgnoreMixedContent> <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText> <w:DoNotPromoteQF/> <w:LidThemeOther>NO-BOK</w:LidThemeOther> <w:LidThemeAsian>X-NONE</w:LidThemeAsian> <w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript> <w:Compatibility> <w:BreakWrappedTables/> <w:SnapToGridInCell/> <w:WrapTextWithPunct/> <w:UseAsianBreakRules/> <w:DontGrowAutofit/> <w:SplitPgBreakAndParaMark/> <w:EnableOpenTypeKerning/> <w:DontFlipMirrorIndents/> <w:OverrideTableStyleHps/> </w:Compatibility> <m:mathPr> <m:mathFont m:val="Cambria Math"/> <m:brkBin m:val="before"/> <m:brkBinSub m:val="&#45;-"/> <m:smallFrac m:val="off"/> <m:dispDef/> <m:lMargin m:val="0"/> <m:rMargin m:val="0"/> <m:defJc m:val="centerGroup"/> <m:wrapIndent m:val="1440"/> <m:intLim m:val="subSup"/> <m:naryLim m:val="undOvr"/> </m:mathPr></w:WordDocument> </xml><![endif]-->world!';

$str =~ s/<!--.*?-->//sg;
print $str;

Output:
hello world!

JavaScript does not have an `s` modifier. Use `[\s\S]` instead of `.`. — Mike Samuel, Apr 13 '11 at 18:45

justFatLard · Answer 5 · 2020-11-05T06:43:39.450

I recently needed to do this very thing (i.e. Remove all comments from a html file). Some things that these other answers don't take into consideration;

An html file can have css and JS inline, which, well I wanted to strip at least
Comment syntax while inside a string or regex is totally valid. (My string/regex exclusion pattern is based on: https://stackoverflow.com/a/23667311/3799617)

TLDR: (I just want the regex that removes all the comments, plz)

/\\\/|\/\s*(?:\\\/|[^\/\*\n])+\/|\\"|"(?:\\"|[^"])*"|\\'|'(?:\\'|[^'])*'|\\`|`(?:\\`|[^`])*`|(\/\/[\s\S]*?$|(?:<!--|\/\s*\*)\s*[\s\S]*?\s*(?:-->|\*\s*\/))/gm

And here is a simple demo: https://www.regexr.com/5fjlu

I don't hate reading, show me the rest:

I also needed to do various other matching that took into account valid strings containing things that otherwise appear as valid targets. So I made a class to handle my variety of uses.

class StringAwareRegExp extends RegExp {
    static get [Symbol.species]() { return RegExp; }

    constructor(regex, flags){
        if(regex instanceof RegExp) regex = StringAwareRegExp.prototype.regExpToInnerRegexString(regex);

        regex = super(`${StringAwareRegExp.prototype.disqualifyStringsRegExp}(${regex})`, flags);

        return regex;
    }

    stringReplace(sourceString, replaceString = ''){
        return sourceString.replace(this, (match, group1) => { return group1 === undefined ? match : replaceString; });
    }
}

StringAwareRegExp.prototype.regExpToInnerRegexString = function(regExp){ return regExp.toString().replace(/^\/|\/[gimsuy]*$/g, ''); };
Object.defineProperty(StringAwareRegExp.prototype, 'disqualifyStringsRegExp', {
    get: function(){
        return StringAwareRegExp.prototype.regExpToInnerRegexString(/\\\/|\/\s*(?:\\\/|[^\/\*\n])+\/|\\"|"(?:\\"|[^"])*"|\\'|'(?:\\'|[^'])*'|\\`|`(?:\\`|[^`])*`|/);
    }
});

From this I created two more classes to hone in on the 2 major types of matches I needed:

class CommentRegExp extends StringAwareRegExp {
    constructor(regex, flags){
        if(regex instanceof RegExp) regex = StringAwareRegExp.prototype.regExpToInnerRegexString(regex);

        return super(`\\/\\/${regex}$|(?:<!--|\\/\\s*\\*)\\s*${regex}\\s*(?:-->|\\*\\s*\\/)`, flags);
    }
}

class StatementRegExp extends StringAwareRegExp {
    constructor(regex, flags){
        if(regex instanceof RegExp) regex = StringAwareRegExp.prototype.regExpToInnerRegexString(regex);

        return super(`${regex}\\s*;?\\s*?`, flags);
    }
}

And finally (however useful it may be to whomever) the regex created from this:

const allCommentsRegex = new CommentRegExp(/[\s\S]*?/, 'gm');
const enableBabelRegex = new CommentRegExp(/enable-?_?\s?babel/, 'gmi');
const disableBabelRegex = new CommentRegExp(/disable-?_?\s?babel/, 'gmi');
const includeRegex = new CommentRegExp(/\s*(?:includes?|imports?|requires?)\s+(.+?)/, 'gm');
const importRegex = new StatementRegExp(/import\s+(?:(?:\w+|{(?:\s*\w\s*,?\s*)+})\s+from)?\s*['"`](.+?)['"`]/, 'gm');
const requireRegex = new StatementRegExp(/(?:var|let|const)\s+(?:(?:\w+|{(?:\s*\w\s*,?\s*)+}))\s*=\s*require\s*\(\s*['"`](.+?)['"`]\s*\)/, 'gm');
const atImportRegex = new StatementRegExp(/@import\s*['"`](.+?)['"`]/, 'gm');

And lastly, if anyone cares to see it in use. Here's the project I used it in (..My personal projects are always a WIP..): https://github.com/fatlard1993/page-compiler

score 0 · Answer 6 · answered Mar 14 '19 at 05:28

const regex = /<!--(.*?)-->/gm;
const str = `You will be able to see this text. <!-- You will not be able to see this text. --> You can even comment out things in <!-- the middle of --> a sentence. <!-- Or you can comment out a large number of lines. --> <div class="example-class"> <!-- Another --> thing you can do is put comments after closing tags, to help you find where a particular element ends. <br> (This can be helpful if you have a lot of nested elements.) </div> <!-- /.example-class -->`;
const subst = ``;

// The substituted value will be contained in the result variable
const result = str.replace(regex, subst);

console.log('Substitution result: ', result);

Please explain why you are using the `m` pattern modifier. – mickmackusa Jun 08 '21 at 21:36 — mickmackusa, Jun 08 '21 at 21:36

score 0 · Answer 7 · answered Apr 13 '11 at 17:42

0

html = html.replace("(?s)<!--\\[if(.*?)\\[endif\\] *-->", "")

answered Apr 13 '11 at 17:42

Dmitry Negoda

2,894
2
18
15

1

JavaScript doesn't support the `s` modifier, nor does it support inline-modifier syntax, like `(?s)`. – Alan Moore Apr 13 '11 at 21:06

Remove HTML comments with Regex, in Javascript

7 Answers7

Linked

Related