Javascript 类名称替换需要Regexp_Javascript

Javascript 类名称替换需要Regexp

javascript

Javascript 类名称替换需要Regexp,javascript,Javascript,我有以下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<

我有以下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>


.3级{
}
.sec2{
}
.这个{
}
内容
内容2
内容2

我在数组中有值class3、sec2和this3。
我想从HTML代码中替换此class3、sec2和this3。
我还想完全删除样式标记（它的id名为“styletag”）

如何使用regexp？

通过替换以下内容来删除类：

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

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

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

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

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';
}

忘记regex。你不能用regex以任何方式可靠地解析HTML。如果你是从JavaScript运行，regex意味着读写整个文档的

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

您想在javascript中实现这一点吗？是的，基本上是从

块中以内联方式重新创建样式？感谢您的快速响应。首先，我没有得到正确的输出。还有一件事，如果div看起来像内容，那么它应该只替换class3，而不是“class3cont”，我的意思是与class3完全匹配。当我运行第二个，它在正则表达式后抛出无效标志…请您再次以正确的方式指示我许多thxI添加了两个“\b”单词边界到第一个，第二个转义为斜杠。如果输出有其他问题，请提供一个示例。如果可能，使用jQuery或直接像Ramiz的答案中那样操作DOM是一种更好的方法。是的……在我添加\.之后，第二个工作得很好。在这里，我添加了示例.str='.class3{}.sec2{}.this3{}content2content2'；str=str.replace（/\b\b（]+class=“[^”]*））\b（class3 | this3 | sec2）\b（[^“]*”/，“test”）；警报（str）；在正则表达式的开头有两个额外的单词边界，需要设置/g标志来替换所有出现的单词。仅替换为“test”而不是“$1$3”也会删除太多数据。试试这个：str=str.replace（/（]+class=“[^”]*）\b（class3 | this3 | sec2）\b（[^”]*”）/g，“$1$3”）；伟大的工作正常。我对这个RegExp不是很熟悉。str='.class3{}.sec2{}.this3{}content2content2'；sid='class3 | this3 | sec2'；reg=newregexp（“（[^>]+class（？：name）？=“[^”]*）\b（“+sid+”）\b（[^”]*”，“g”）；str=str.replace（reg，“$1$3”）；警报（str）；它不起作用。你能告诉我哪里是错误的。我理解这个表达，但1美元3美元是什么，可以给一些网站去通过thathi thx的答复。我只想要正则表达式模式。非常感谢。是的。。。这真的很好。我们正在使用jquery框架。但在我的场景中，情况有所不同。删除这些类不应影响客户端视图。我的意思是我们将innerHTML值分配给一个变量。此更改应仅影响不在浏览器中的变量。

clone（）

主体，以便获得不影响原始的副本，然后使用例如

clone.find（'.class3'）.removeClass（'class3'）删除类。

。然后，获取修改后的克隆的html。这是一个好的举动。这是否可能克隆完整的html。不仅从body标签开始，我还需要从html开始的完整内容。是的，您可以克隆documentElement

。克隆文档节点本身（即包括


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

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