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

Question

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

<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

score 5 · Accepted Answer

使用正则表达式，此模式应该适合您：

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

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

score 3 · Accepted Answer

在这里测试它：https ://regex101.com/r/vnOFjm/1

正则表达式：(?:class|className)=(?:["']\W+\s*(?:\w+)\()?["']([^'"]+)['"]

const regex = /(?:class|className)=(?:["']\W+\s*(?:\w+)\()?["']([^'"]+)['"]/gmi;
const str = `<div id="content" class="container">

<div style="overflow:hidden;margin-top:30px">
  <div style="width:300px;height:250px;float:left">
<ins class="adsbygoogle turbo" style="display:inline-block !important;width:300px;min-height:250px; display: none !important;" data-ad-client="ca-pub-1904398025977193" data-ad-slot="4723729075" data-color-link="2244BB" qgdsrhu="" hidden=""></ins>


<img src="http://static.teleman.pl/images/pixel.gif?show,753804,20160812" alt="" width="0" height="0" hidden="" style="display: none !important;">
</div>`;

let m;

while ((m = regex.exec(str)) !== null) {
    // This is necessary to avoid infinite loops with zero-width matches
    if (m.index === regex.lastIndex) {
        regex.lastIndex++;
    }
    
    // The result can be accessed through the `m`-variable.
    m.forEach((match, groupIndex) => {
        console.log(`Found match, group ${groupIndex}: ${match}`);
    });
}

score 2 · Accepted Answer

使用浏览器对您有利：

var str = '<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) -->';

var wrapper = document.createElement('div');
wrapper.innerHTML = str;

var elements = wrapper.getElementsByClassName('b');

if (elements.length) {
    // there are elements with class b
}

演示

顺便说一句，getElementsByClassName()直到版本 9 才在 IE 中得到很好的支持；检查此答案以获取替代方法。

score 1 · Accepted Answer

正则表达式不适合解析 HTML。HTML 不规则。

jQuery 在这里非常适合。

var html = 'Your HTML here...';

$('<div>' + html + '</div>').find('[class~="b"]').each(function () {
    console.log(this);
});

选择器[class~="b"]将选择具有class包含 word 的属性的任何元素b。初始 HTML 包含在 adiv中以使该find方法正常工作。

score -1 · Accepted Answer

这可能不是您的解决方案，但如果您没有设置使用完整的正则表达式匹配，您可以这样做（假设您的示例代表您将解析的数据）：

function hasTheClass(html_string, classname) {
    //!!~ turns -1 into false, and anything else into true. 
    return !!~html_string.split("=")[1].split(/[\'\"]/)[1].split(" ").indexOf(classname);
}

hasTheClass("<div class='a b c d'></div>", 'b'); //returns true

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

5 回答 5

Related

Reference