Ayman Jitan Ayman Jitan - 1 year ago 125
Javascript Question

regular expression to get a class name from html

I know my question might look like a duplication for this question, but its not

I am trying to match a class name inside html text that comes from the server as a template using JavsScript RegExp and replace it with another class name.
here what the code looks like :

<div class='a b c d'></div>
<!-- or -->
<div class="a b c d"></div>
<!-- There might be spaces after and before the = (the equal sign) -->

I want to match the class "b" for example
with the highest performance possible

here is a regular expression I used but it's not working in all cases, and I don't know why :

var key = 'b';
statRegex = new RegExp('(<[\w+ class="[\\w\\s]*?)\\b('+key+')\\b([\\w\\s]*")');
html.replace( statRegex,'SomeOtherClass');// I may be mistake by the way I am replacing it here

Answer Source

Using a regex, this pattern should work for you:

var r = new RegExp("(<\\w+?\\s+?class\\s*=\\s*['\"][^'\"]*?\\b)" + key + "\\b", "i");
#                   Λ                                         Λ                  Λ
#                   |_________________________________________|                  |
#                           ____________|                                        |
# [Creating a backreference]                                                     |
# [which will be accessible]  [Using "i" makes the matching "case-insensitive".]_|
# [using $1 (see examples).]  [You can omit "i" for case-sensitive matching.   ]


var oldClass = "b";
var newClass = "e";
var r = new RegExp("..." + oldClass + "...");

"<div class='a b c d'></div>".replace(r, "$1" + newClass);
    // ^-- returns: <div class='a e c d'></div>
"<div class=\"a b c d\"></div>".replace(r, "$1" + newClass);
    // ^-- returns: <div class="a e c d"></div>    
"<div class='abcd'></div>".replace(r, "$1" + newClass);
    // ^-- returns: <div class='abcd'></div>     // <-- NO change

For the above regex to work there must be no ' or " inside the class string.
I.e. <div class="a 'b' c d"... will NOT match.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download