Return to Answer

Note: . does not match new-line character even with m-multiline flag Demo. Work-around is to use [\s\S] which matches any character. See Javascript regex multiline flag doesn't work

Note: . does not match new-line character even with m-multiline flag Demo. Work-around is to use [\s\S] which matches any character. See Javascript regex multiline flag doesn't work

function replaceRules() {
 var regex = /(a:link,\s*span\.MsoHyperlink|a:visited,\s*span\.MsoHyperlinkFollowed)[\s\S]*?}/gi;
 var textArea = document.querySelector('textarea');
 textArea.value = textArea.value.replace(regex, '');
}

input {
 margin-bottom: 5px;
 color: green;
 padding: 5px;
}
textarea {
 width: 100%;
}

<input type="button" value="Remove problematic rules" onclick="replaceRules()" />
<textarea cols="40" rows="14">
body {
 background: red;
}
a:link, span.MsoHyperlink{mso-style-unhide:no;
color:blue;
text-decoration:underline;
text-underline:single;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-noshow:yes;
mso-style-priority:99;
color:purple;
mso-themecolor:followedhyperlink;
text-decoration:underline;
text-underline:single;}
a {
 color: gray;
}
</textarea>
<br />
<input type="button" value="Remove problematic rules" onclick="replaceRules()" />

seems unnecessary. With these two statements, you're creating two extra variables, an additional replace and then creating a regular expression from string. Same is for other rule.

What if there are 10 more CSS rules to be removed? Will you create 10 more strings, 10 more regex and 10 replacements?

You were thinking right. The two regex can be combined using OR condition in regex with g flag to replace all occurrences.

var regex = /a:link, span\.MsoHyperlink\s*{[^}]*?}/gim; // First selector regex

var regex = /a:visited, span\.MsoHyperlinkFollowed\s*{[^}]*?}/gim; // Second selector regex

a:link, span\.MsoHyperlink\s*{[^}]*?}|a:visited, span\.MsoHyperlinkFollowed\s*{[^}]*?}

This works. But, there is duplication of the part \s*{[^}]*?} which can be removed using grouping

(a:link, span\.MsoHyperlink|a:visited, span\.MsoHyperlinkFollowed)\s*{[^}]*?}

I'll suggest to use \s* instead of space between two selectors

(a:link,\s*span\.MsoHyperlink|a:visited,\s*span\.MsoHyperlinkFollowed)\s*{[^}]*?}

To match the rules of a selector use [\s\S]*?} where [\s\S] will match any character(line-break too) thus no need of m flag anymore, while *? following it will make the regex lazy. See http://www.regular-expressions.info/repeat.html. Lazy repetition will match fewer characters to satisfy the following condition in regex. So, [\s\S]*?} will match anything until } character.

(a:link,\s*span\.MsoHyperlink|a:visited,\s*span\.MsoHyperlinkFollowed)[\s\S]*?}/gi

function replaceRules() {
 var regex = /(a:link,\s*span\.MsoHyperlink|a:visited,\s*span\.MsoHyperlinkFollowed)[\s\S]*?}/gi;
 var textArea = document.querySelector('textarea');
 textArea.value = textArea.value.replace(regex, '');
}

<textarea cols="40" rows="14">
body {
 background: red;
}
a:link, span.MsoHyperlink{mso-style-unhide:no;
color:blue;
text-decoration:underline;
text-underline:single;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-noshow:yes;
mso-style-priority:99;
color:purple;
mso-themecolor:followedhyperlink;
text-decoration:underline;
text-underline:single;}
a {
 color: gray;
}
</textarea>
<br />
<input type="button" value="Remove problematic rules" onclick="replaceRules()" />

seems unnecessary. With these two statements, you're creating two extra variables, an additional replace and then creating a regular expression from string. Same is for other selector too.

What if there are 10 more CSS rules to be removed? Will you create 10 more strings, 10 more regex and 10 replacements? And what if there are 100 such rules?

The two regex can be combined using OR condition in regex with g flag to replace all occurrences.

var linksRegex = /a:link, span\.MsoHyperlink\s*{[^}]*?}/gim; // First selector regex

var visitedLinksRegex = /a:visited, span\.MsoHyperlinkFollowed\s*{[^}]*?}/gim; // Second selector regex

/a:link, span\.MsoHyperlink\s*{[^}]*?}|a:visited, span\.MsoHyperlinkFollowed\s*{[^}]*?}/

This works. But, there is duplication of the part \s*{[^}]*?} which can be removed using groups

/(a:link, span\.MsoHyperlink|a:visited, span\.MsoHyperlinkFollowed)\s*{[^}]*?}/

I'll suggest to use \s* instead of space between two selectors which will match any number of any space characters(space, tab, vertical tabs, etc.)

/(a:link,\s*span\.MsoHyperlink|a:visited,\s*span\.MsoHyperlinkFollowed)\s*{[^}]*?}/

To match the CSS rule properties of a selector use [\s\S]*?} where [\s\S] will match any character(space characters and non-space characters) thus no need of m flag anymore, while *? following it will make the regex lazy. See http://www.regular-expressions.info/repeat.html. Lazy repetition will match fewer characters to satisfy the following condition in regex. So, [\s\S]*?} will match anything until } character.

/(a:link,\s*span\.MsoHyperlink|a:visited,\s*span\.MsoHyperlinkFollowed)[\s\S]*?}/gi

function replaceRules() {
 var regex = /(a:link,\s*span\.MsoHyperlink|a:visited,\s*span\.MsoHyperlinkFollowed)[\s\S]*?}/gi;
 var textArea = document.querySelector('textarea');
 textArea.value = textArea.value.replace(regex, '');
}

input {
 margin-bottom: 5px;
 color: green;
 padding: 5px;
}
textarea {
 width: 100%;
}

<input type="button" value="Remove problematic rules" onclick="replaceRules()" />
<textarea cols="40" rows="14">
body {
 background: red;
}
a:link, span.MsoHyperlink{mso-style-unhide:no;
color:blue;
text-decoration:underline;
text-underline:single;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-noshow:yes;
mso-style-priority:99;
color:purple;
mso-themecolor:followedhyperlink;
text-decoration:underline;
text-underline:single;}
a {
 color: gray;
}
</textarea>

With these changes the regex will become

Note:. does not match new-line character even with m-multiline flag Demo . Work-around is to use [\s\S] which matches any character. See Javascript regex multiline flag doesn't work

With these changes the regex will become