javascript - 从html中获取类名的正则表达式

Question

我知道我的问题可能看起来像是 this question 的重复，但它不是
我正在尝试使用 JavsScript RegExp 匹配来自服务器的 html 文本 中的类名作为模板，并将其替换为另一个类名。这是代码的样子:

<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) -->

例如，我想匹配类“b”
具有尽可能高的性能

这是我使用的正则表达式，但它并非在所有情况下都有效，我也不知道为什么:

  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 1

使用正则表达式，这个模式应该适合你:

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

注意:
要使上述正则表达式起作用，必须没有 '。或 "在类字符串中。
IE。 <div class="a 'b' c d"...将不匹配。