如何在 JavaScript 中将字符串与 html 标记匹配？答案

【问题标题】：How to match a String with html Markup in JavaScript?如何在 JavaScript 中将字符串与 html 标记匹配？
【发布时间】：2018-07-23 18:27:32
【问题描述】：

我正在尝试制作一个可点击的元素来控制侧边栏。元素的 html 文本应更改为 > 取决于侧边栏是否可见。我想出了以下代码

JavaScript：

\$j("#id_button").click(function(){
    \$j(".sidebar").fadeToggle();        
    \$j("#id_button").html() === ("&lsaquo;&lsaquo;") ?  \$j("#id_button").html("&rsaquo;&rsaquo;") : \$j("#id_button").html("&lsaquo;&lsaquo;");
});

以及相应的html：

<a id="id_button">&lsaquo;&lsaquo;</a>

当我使用纯文本而不是 MarkupEntities 时，代码可以正常工作。例如："&lsaquo;" 的“左”和"&rsaquo;" 的“右”但是使用实体不起作用，因为字符串 "&lsaquo;&lsaquo;" 无法与 .html() 返回的内容匹配。

【问题讨论】：

与你得到的比较（使用控制台），应该是<<和>>（如果你执行console.log( $('#id_button').html(); )，你会看到"‹‹"）。但更好的方法：使用变量/标志来标记侧边栏是打开还是关闭。

标签： javascript jquery html string-matching html-entities

【解决方案1】：

你可以直接使用箭头吗？

jQuery("#id_button").click(function() {
    var button = jQuery(this);
    var left=  "‹‹";
    var right = "››";
    // $jQuery(".sidebar").fadeToggle();        

   button.html() ===  left ?  button.html(right) :  button.html(left);
});

工作fiddle

【讨论】：