Regex replace certain class names with JavaScript from a html document

Question

I am trying to remove all the class names that end with an underscore. So:

<div class="foo bar_ baz boo_ fa"> </div>

would output:

<div class="foo baz fa"> </div>

I am trying to do this in JavaScript and so far I can do it if the input only contains the string without other stuff:

```Node.js
var input = "foo bar_ baz boo_ fa";
input = input.replace(/(\w*[^ ])(?=_)(_)/g, "");

outputs:

foo  baz  fa

I am guessing that I am not using look ahead correctly. I wish I could something like:

input = input.replace(/class\s*=\s*["'](\w*[^ ])(?=_)(_)/g, "");

Program's overall purpose:

The purpose of the script is to read the html document and remove the "bad" class names from the whole document...

I am not that good at regex, was just trying to find an easy way to match with an ending character, and the only way that I could come up with was with lookahead on an isolated piece of string. I guess I shouldn't use it then ... — AJ Meyghani
– AJ Meyghani, Commented Dec 1, 2014 at 19:55

Paul · Accepted Answer · 2014-12-01 22:13:15Z

4

I tried /[^\s]+_(?: +|$)/g and it matches any classes ending with an underscore and all the trailing spaces (if there are any). This should work for your replace.

Edit: Since your string is more complicated than I thought, try this.

//get our test string
var input = "<div style=\"crazy_omg nowai_    \" class = \"bar_ baz boo1_              fa fsfs_ joined_name joined-name  \"></div><input class= \"eh_\" CLASS ='WUT_ WINSD_ SKJDJASD_Jkzsd' class=ok_    bugs='existing' class=biiii_ /> <div class=fndjkdf /> <span style='color:red' class=jkndndfd_ /></span></div>",
//build our regular expressions
attrMatcher = /(?:class *= *[\'\"]{0,1})((?:[\w -](?!\w+=|\/))+)[\'\"]*/gi,
classMatcher = /[^\s]+_(?: +|$)/g;

//if we find a class, check it for errors
var result = input.replace(attrMatcher, function(full, capture){
    //remove errors and return
    return "class=\""+capture.replace(classMatcher, '') + "\"";
});

Fiddle of it in action: click

I hope that helps.

edited Dec 1, 2014 at 22:13

answered Dec 1, 2014 at 19:51

Paul

6464 silver badges13 bronze badges

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

5 Comments

AJ Meyghani Over a year ago

Is there a way to make this less greedy because for example if the input is: <div class="bar_ baz boo_ fa"></div>, then the output becomes <div baz fa"></div>

Paul Over a year ago

I guess since there's no way to know what attributes may be in input or even if there will only be one input per check, you'd want to do something a bit more complicated. I'll update my answer.

Paul Over a year ago

Markus, class names can include underscores and hyphens as well. I'm not sure that regex will hold up.

Markus Over a year ago

Valid classes look like this -?[_a-zA-Z]+[_a-zA-Z0-9-]*, according to the CSS 2.1 Grammar (w3.org/TR/CSS21/grammar.html#scanner)

Paul Over a year ago

Updated my answer with something I think will work no matter what the contents of input are like.

Collectives™ on Stack Overflow

Regex replace certain class names with JavaScript from a html document

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related