Javascript Regex：如何仅替换任何 tr 的属性类？

Question

我有以下 HTML 代码：

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

我想替换所有类属性（仅用于 tr> s），但不用于 td> s。 （应该是 XXX 和 XYZ）。替换为：XXX_suffix, XYZ_sufix

这是我的解决方法，但它替换了所有类属性（也在元素中！）。

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

但是我怎样才能替换 只是 tr 类属性 ??

jQuery 中还有其他方法吗？？

Answer 1

我厌倦了你想要做的事情，但这行得通。

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

然后你的字符串变成

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

这一切都假设您希望/必须将其作为字符串处理（同样，仍然很累）。

Answer 2

虽然这可以使用正则表达式完成，但并非在所有情况下都有效。

如果你使用 jQuery（你应该！），这很容易：

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

Answer 3

是的，有一个简单的方法：

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

如果你想改变现有的类，你可以这样做：

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

另外，请注意元素 ID 不应以数字开头，而应以字母开头。

EDIT 更多关于 .attr() 方法的内容。 .attr("name") 返回该属性的值，而 .attr("name", "value") 将属性设置为该值。对于处理类，jQuery 有一些辅助方法：addClass("class")、removeClass("class") 和 hasClass("class")。这些都是不言自明的

EDIT 2 如果您像这样从动态 html 创建一个 jquery 对象：

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

那么你可以使用我建议的方法