Javascript 正则表达式只工作一次

我最近通过创建一个小小的待办事项列表web应用程序来学习JavaScript

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

-->

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

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

}

if（tr.outerHTML.indexOf（“checked=\“\”）>=0）{
//将选中的替换为未选中的
var cookieHTML=tr.outerHTML.replace（/checked=\“\”类=\”列表复选框\“/，'class=\”列表复选框\“）
.替换（/，'alt=“Neutral”>'））
.replace（/，'alt=“emergency”>'））
.replace（/尝试使用Regex的全局选项（查看第二个斜杠后的g）：

/。。。
.replace（/我会说：你做错了。使用string/regex替换方法不是正确的方法

使用DOM方法代替这些替换，例如：

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

以下是一个简单的例子：

我知道这不是对你问题的直接回答，但请相信我，这是一种方法
如果你想做的只是根据选中或否的复选框更改图标，你可以这样做

 function getVisibility()
{
  var temp = document.getElementById("iconName").style.visibility;

  return temp;
}

function switchIfChecked()
{

  var current = getStyle();

  if( current == "visible" )
   {
     document.getElementById("iconName").style.visibility = "hidden";
   }
   else
   {
     document.getElementById("iconName").style.visibility = "visible";
   }
}

<div id="iconName" style="visibility: visible">INSERT ICON IMG here</div>

函数getVisibility（）
{
var temp=document.getElementById（“iconName”）.style.visibility；
返回温度；
}
函数switchIfChecked（）
{
var current=getStyle（）；
如果（当前==“可见”）
{
document.getElementById（“iconName”）.style.visibility=“hidden”；
}
其他的
{
document.getElementById（“iconName”）.style.visibility=“可见”；
}
}
在此处插入图标IMG

上面所做的是使图标的div可见或隐藏。当然，您需要有两个div，然后将或设置为隐藏或可见。
就您目前所做的，您并没有真正让浏览器做任何事情。
您正在学习JavaScript，这太棒了。干得好。但是，我很高兴您发布了这个问题，因为看起来您可以使用一些指针

你的问题的答案是——是的，有一种更简单的方法可以达到这个效果——我很快就会讲到。但首先，我注意到，在你的todo应用程序的底部，有一个名为JQuery的库

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>



这个库将对您有巨大的帮助，不仅在您上面描述的函数方面，而且对您所编写的大多数代码都有帮助。最终您将得到更清晰、自我解释的代码


基本上，JQuery允许您操作DOM的状态

下面是一个小示例，它显示了一个复选框，可以选中或取消选中该复选框，并且在更改时，根据需要显示或隐藏一个元素


请——花点时间看看JQuery——这是提高JavaScript的可生产性和降低复杂性的第一步

另外，如果你发现自己使用js来构建带有字符串的HTML，答案总是“有更好的方法”
/g
有史以来最好的朋友。@Marc通过查看上面的代码，我认为OP已经有了一个想象中的最好的朋友。；+1@Marc/g，或“global”影响要匹配的整个字符串只是尝试了这个，但似乎不起作用：/my的所有正则表达式现在看起来都是这样的（只是为了检查我是否正确
/checked=\“\”类=\”列表复选框\“/g
或者可能是更改这些图标的更好方法？-是的，使用js操作DOM。您所做的只是将文本分配给名为
cookieHtml
的变量。您实际上什么都没有做。您是否将g添加到所有正则表达式中？是的：）尽管启动整个操作的if语句仍然是
if（tr.outerHTML.indexOf（“checked=\”\“”）>=0）{
如果这能起到作用的话？+1表示有勇气提出正确的方法，而不是解决问题！：P我同意这听起来是一种更简单的方法！将用这种方法替换它！这也是了解jquery的一个好方法，以及使用jQueryEP编写javascript有多有趣我包括jquery以获得乐趣单击登录屏幕上的链接时向下滑动页面。不过，本练习的目的是学习vanilla JS，虽然我同意jQuery可能是一种更好的方法，但就我学习JS而言，我想学习vanilla，因此我完全掌握了该语言。我可能会在稍后的时间在jQuery中重新使用它te:）@lucas572选择VanillaJS是正确的选择。在进入一个库/框架之前，一定要先学习语言。然后才是好东西：）虽然我认为我的最后一点是关于在js中使用这样的字符串构建HTML，但通常在任何语言中，如果你最终这样做了，那么你的警钟应该会响得很响。-@happybudda有一个香草js风格的解决方案，它比在HTML中添加和删除“magic”属性更明确。
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>