Question

我有以下HTML代码：看起来像

<html>
<head>
</head>
<style id="styletag">
.class3{
}
.sec2{
}
.this3{
}
</style>

<body>
<div class="class1 class2 class3">content</div>
<div class="sec1 sec2 sec3">content2</div>
<div class="this1 this2 this3">content2</div>
</body>
</html>

我在数组中有值class3，sec2和this3 我想从HTML代码中替换这个class3，sec2和this3 我还想完全删除样式标记（它具有id名称'styletag'）。

我如何使用正则表达式？

Answer 1

很抱歉，如果我误解了你的要求。

for(var index=0; index<document.getElementsTagName("div").length; index++) {
if( document.getElementsTagName("div")[index].style.className.indexOf("class3")
|| document.getElementsTagName("div")[index].style.className.indexOf("sec2")
|| document.getElementsTagName("div")[index].style.className.indexOf("this3")
)
// assign a new css
document.getElementsTagName("div")[index].style.className = 'newCss';
// or clear style
// document.getElementsTagName("div")[index].style.className = '';
// or add up another style
// document.getElementsTagName("div")[index].style.className += ' newCSS';
}

关于删除Style代码：

document.getElementById("styletag").parentNode.removeChild(document.getElementById("styletag"));

Answer 2

通过替换它来删除类：

(<div[^>]+class="[^"]*)\b(class3|this3|sec2)\b([^"]*")

用这个：

$1$3

可以通过将以下内容替换为空白字符串来删除样式标记：

<style id="styleTag">[^<]*<\/style>

实现同样目标的另一个好方法是使用jQuery。

Answer 3

忘记正则表达式。您无法使用正则表达式以可靠的方式解析HTML。如果你是从JavaScript运行正则表达式意味着读取和写入整个文档innerHTML，你应该避免。

这是一个关于检测完整而不仅仅是部分类名称的更严格的JS版本：

function Element_setClass(element, classname, active) {
    var classes= element.className.split(' ');
    var ix= classes.indexOf(classname);
    if ((ix!==-1)===active)
        return;
    if (active)
        classes.push(classname);
    else
        classes.splice(ix, 1);
    element.className= classes.join(' ');
}

var els= document.getElentsByTagName('div');
for (var i= els.length; i-->0;) {
    Element_setClass(els[i], 'class3', false);
    Element_setClass(els[i], 'sec2', false);
    Element_setClass(els[i], 'this3', false);
}
var el= document.getElementById('styletag');
el.parentNode.removeChild(el);

虽然我不喜欢将框架拖到一个简单的JavaScript问题中，但我不得不承认jQuery使这很容易拼写：

$('.class3').removeClass('class3');
$('.sec2').removeClass('sec2');
$('.this3').removeClass('this3');
$('#styletag').remove();

需要Regexp进行classname替换

3 个答案: