Javascript Regex: how to replace just the class of attribute for any tr ?

Question

I have the following HTML code:

<tr id="1774" class="XXX"><td> <span class="YYY">

Element 1</span></td></tr>

<tr id="1778" class="XYZ"><td> <span class="ZZZ">Element 2
</span></td>

</tr>

I want to replace all the class attributes (just for <tr> s) but not for <td> s. (that would be XXX and XYZ). The replacement would be: *XXX_suffix, XYZ_sufix*

Here is my workaround, but it replaces all the class attributes (in elements too!).

var htmlBlock= "<tr id="1774" class="XXX"><td> <span class="YYY">...</span></td></tr>";
htmlBlock+="<tr id="1778" class="XYZ"><td> <span class="ZZZ">...</span></td></tr>";

htmlBlock= htmlBlock.replace(/class="\s*(\w*)/g, "class=\" $1 " + _suffix);

But how can I replace just the tr class attribute ??

Is there another way in jQuery ??

Answer 1

Yes there is an easy way:

$("tr").removeClass("XYZ").addClass("XXX");

If you want to change the existing class you can do something like:

var trClass = $("tr#1234").attr("class");
/* do some string operation on tr class string */
$("tr").attr("class", "").addClass(trClass);

Also, please note that element ids shouldn't start with a numeral but with a letter.

EDIT a bit more on the .attr() method. .attr("name") returns the value of that attribute, whereas .attr("name", "value") sets the attribute to the value. For dealing with classes jQuery has some helper methods: addClass("class"), removeClass("class") and hasClass("class"). these are fairly self explanatory

EDIT 2 If you create a jquery object from your dynamic html like this:

var htmlBlock= "<tr id=\"1774\" class=\"XXX\"><td> <span class=\"YYY\">...</span></td></tr>";
var htmlBlockJ = $(htmlBlock);

then you can use the method i suggested

Answer 2

While this can be done using regex, it's not going to work in all cases.

If you're using jQuery (you should!), it's pretty easy:

$("tr").each(function() { this.className = this.className + _suffix; });

Answer 3

I'm weary of what you're trying to do, but this works.

var s = '<tr id="1774" class="XXX"><td> <span class="YYY">Element 1</span></td></tr><tr id="1778" class="XYZ"><td> <span class="ZZZ">Element 2</span></td></tr>';

s.replace(/(<tr\s+.*?class=").*?(".*)/gi, "$1NEWCLASS$2");

Your string then becomes

<tr id="1774" class="NEWCLASS"><td> <span class="YYY">Element 1</span></td></tr><tr id="1778" class="XYZ"><td> <span class="ZZZ">Element 2</span></td></tr>

This is all assuming that you want/have to handle it as a string (again, still weary).