javascript - 正则表达式只工作一次

Question

我最近一直在通过创建一个小的待办事项列表网络应用程序来学习 JavaScript here .

到目前为止几乎一切正常，但如果您尝试多次选中和取消选中某个项目，我会遇到问题。如果您继续选中/取消选中，您会看到删除按钮消失，--> 出现在紧急图标之后。

图标的更改是通过正则表达式将代码从注释更改为未注释来完成的。我只是不明白为什么它一次有效，但不是每次都有效？

if (tr.outerHTML.indexOf("checked=\"\"") >= 0) {

    // replace checked with unchecked
    var cookieHTML = tr.outerHTML.replace(/checked=\"\" class=\"list-checkbox\"/, 'class=\"list-checkbox\"')
    .replace(/<tr class=\"list-row done\"/, '<tr class=\"list-row\"')


    // change delete button to urgency.
    .replace(/<!--<span aria-hidden=\"true\" data-icon=\"c\"/, '<span aria-hidden="true" data-icon="c"')
    .replace(/alt=\"Neutral\"><\/span>-->/, 'alt="Neutral"></span>')

    .replace(/<!--<span aria-hidden=\"true\" data-icon=\"f\"/, '<span aria-hidden="true" data-icon="f"')
    .replace(/alt=\"Urgent\"><\/span>-->/, 'alt="Urgent"></span>')

    .replace(/<span aria-hidden=\"true\" data-icon=\"e\"/, '<!--<span aria-hidden="true" data-icon="e"')
    .replace(/onclick=\"deletetodo\(this\)\"><\/span>/, 'onclick="deletetodo(this)"></span>-->');

} else {

    // else add checked to the input.
    var cookieHTML = tr.outerHTML.replace(/class=\"list-checkbox\"/, 'checked class=\"list-checkbox\"')
    .replace(/<tr class=\"list-row\"/, '<tr class=\"list-row done\"')


    // change urgency to delete button.
    .replace(/<span aria-hidden=\"true\" data-icon=\"c\"/, '<!--<span aria-hidden="true" data-icon="c"')
    .replace(/alt=\"Neutral\"><\/span>/, 'alt="Neutral"></span>-->')

    .replace(/<span aria-hidden=\"true\" data-icon=\"f\"/, '<!--<span aria-hidden="true" data-icon="f"')
    .replace(/alt=\"Urgent\"><\/span>/, 'alt="Urgent"></span>-->')


    .replace(/<!--<span aria-hidden='true' data-icon='e'/, '<span aria-hidden="true" data-icon="e"')
    .replace(/onclick='deletetodo\(this\)'><\/span>-->/, 'onclick="deletetodo(this)"></span>');

}

这是控制它的(相当大!)JS block 。任何想法出了什么问题？或者也许是改变这些图标的更好方法？

谢谢!

Answer 1

我会说:你做错了。使用字符串/正则表达式替换方法不是正确的方法。

使用 DOM 方法代替那些替换，即:

someElement.setAttribute('data-icon', 'f');
someElement.setAttribute('alt', 'Urgent');

可以在这里找到一个简单的例子:http://jsbin.com/iwakof/1/edit

_{我知道这不是您问题的直接答案，但请相信我，这是要走的路}