正则表达式仅工作一次

Question

我最近通过在此处创建一些待办事项列表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>');

}

这是控制它的JS（相当大！）块。 有什么想法有什么不对吗？ 或者更好的方法是改变这些图标？

谢谢！

Answer 1

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

而不是做那些替换使用DOM方法，即：

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

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

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

Answer 2

你学习JavaScript真是太棒了。 不错的工作。 但是，我很高兴您发布了这个问题，因为看起来您可以使用几个指针。

你的问题的答案是 - 是的，有一个更简单的方法来实现这种效果 - 我将很快得到。 但首先 - 我注意到你的todo应用程序的底部你包含一个名为JQuery的库

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

这个库不仅对您上面描述的功能，而且对您编写的大多数代码都将为您提供巨大的帮助。 最终会得到更清晰，更自我解释的代码。

http://jquery.com/

基本上，JQuery允许您执行的操作是操纵DOM的状态。 您一定要从这里开始。

这是一个小的示例，其中显示了一个复选框，该复选框可以选中或不选中，并且在更改时，可以根据需要显示或隐藏元素。

http://jsfiddle.net/m4vGE/5/

请-花些时间研究一下JQuery-这是您提高生产效率并降低JavaScript复杂性的第一步

另外-作为附带说明，如果您发现自己使用js构建带有字符串的HTML，答案总是“有更好的方法”

Answer 3

如果您要做的只是根据选中或不选中的复选框更改图标，您可以执行类似的操作。

 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>

上面的操作是使图标的div可见或隐藏。 当然，您将需要两个div，然后将或设置为隐藏或可见。 根据当前的操作，您实际上并没有使浏览器执行任何操作。

Answer 4

尝试使用Regex的global选项（在第二个斜杠后查看g）：

// ...
.replace(/<tr class=\"list-row done\"/g, '<tr class=\"list-row\"')
// ...

这是一个例子 。

来自developer.mozilla.org ：

全局：是针对字符串中的所有可能匹配项还是仅针对第一个匹配项来测试正则表达式。