Need Regexp for classname replace

Question

I have following HTML code: Its look like

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

I am having the values class3, sec2 and this3 in array.
I want to replace this class3,sec2 and this3 from the HTML code.
And I also want to remove the style tag entirely (its having the id name 'styletag').

How do i use the regexp?

You want to achieve this in javascript yea? Basically to recreate the style as inline from the ` — o.k.w, Oct 28 '09 at 08:54

score 2 · Accepted Answer · answered Oct 28 '09 at 09:22

Sorry if I misunderstood what you ask for.

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

And regarding removal of Style tag:

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

hi thx for the reply. I want the regex pattern only. Thx a lot. — chinna, Oct 28 '09 at 09:49

Kaivosukeltaja · Answer 2 · 2009-10-28T11:02:16.390

1

Removing the classes works by replacing this:

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

with this:

$1$3

The style tag can be removed by replacing the following with a blank string:

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

Another good way to achieve the same would be using jQuery.

edited Oct 28 '09 at 11:02

answered Oct 28 '09 at 09:18

Kaivosukeltaja

15,541
4
40
70

Thanks for the very quick responses. I didnt get the proper output for the first.One more thing if the div is look like
content
then it should replace the class3 only not the 'class3cont' i mean exact match of class3. when i run the second one it throws invalid flag after regular expression... please can you direct me in right way once again many thx – chinna Oct 28 '09 at 09:48
I added the two "\b" word boundaries to the first one and escaped the slash in the second one. If there are other problems with the output, please provide an example. If possible, using jQuery or manipulating the DOM directly like in Ramiz's answer is a much better way to do this. – Kaivosukeltaja Oct 28 '09 at 11:05
yes... 2nd is working perfectly after i added the \. here with i added the sample. str = '
content
content2
content2
'; str = str.replace(/\b\b(
]+class="[^"]*)\b(class3|this3|sec2)\b([^"]*")/, "test"); alert(str);
– chinna Oct 28 '09 at 11:56
You have two extra word boundaries at the start of the regex, and you need to set the /g flag to replace all occurences. Replacing with only "test" instead of "$1$3" also removes too much data. Try this: str = str.replace(/(
]+class="[^"]*)\b(class3|this3|sec2)\b([^"]*")/g, "$1$3");
– Kaivosukeltaja Oct 28 '09 at 14:42
Great!!!.Its working fine.I am not not very much familiar with this RegExp. str = '
content
content2
content2
'; sid = 'class3|this3|sec2'; reg = new RegExp('([^>]+class(?:name)?="[^"]*)\b('+sid+')\b([^"]*")','g'); str = str.replace(reg,"$1$3"); alert(str); It is not working.Can u guide me where is the mistake.I understand the expression,but what is the $1$3,can give some sites to go thru that – chinna Oct 29 '09 at 04:19
$1$3 in the replacement pattern are references to the contents of the first and third parentheses, in this case everything except the classname you're replacing. The classname would be in $2. – Kaivosukeltaja Oct 29 '09 at 06:40
This seems like a good tutorial on back references: http://www.regular-expressions.info/brackets.html – Kaivosukeltaja Oct 29 '09 at 06:41

score 1 · Answer 3 · answered Oct 28 '09 at 10:56

Forget regex. You can't use regex to parse HTML in any way reliably. And if you're running from JavaScript regex means reading and writing the entire document's innerHTML, which you should avoid.

Here's a JS version that's a bit more rigorous about detecting full and not just partial class names:

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

And though I'm loathe to drag in frameworks to a plain JavaScript question, I have to admit jQuery makes this very easy to spell:

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

yes... this is really good. We are using jquery frame work. But in my scenario something different.Removing this classes should not affect in the client view. I mean we are assigning the innerHTML value to one variable. This changes are should affect only to the variable not in the browser. — chinna, Oct 28 '09 at 12:02
`clone()` the body so you get a copy that doesn't affect the original, then remove the classes using eg. `clone.find('.class3').removeClass('class3')`. Then take the html of the altered clone. — bobince, Oct 28 '09 at 13:11
ya good move.is this possible clone the full html. Not only from the body tag, i need the full content starting from the html. — chinna, Oct 28 '09 at 13:36
Yes, you can clone the documentElement ``. Cloning the Document node itself (ie. including the ` `) is non-standard and generally can't be relied upon (but usually isn't required). — bobince, Oct 28 '09 at 13:46

Need Regexp for classname replace

3 Answers3

Linked