jquery - 在 HTML 中，单击时用 X 替换 unicode 字符 ☰

Question

我正在为菜单图标使用 unicode 字符 ☰并喜欢将其替换为 x单击时的字符。

HTML 文档编码为 UFT-8。 <meta charset="utf-8">

还有一些文字，Menu (后跟一个空格)，在 unicode 字符之前，我不想更改，因为它的字体大小是用 FlowType.js 动态调整的，这意味着如果我改变了整个地段，被替换的字体大小就不一样了，这使得设计变得非常难看。

Here is the jsfiddle .

这是我尝试过的方法，但不知何故它没有捕捉到引号中的字符，我对正则表达式毫无用处。

HTML

<div id="menu-button" class="menu-button" >
    <p id="menu-button-link">Menu &#9776;</p>
</div>

CSS

#menu-button {
  text-align: center;
  line-height: 80px;
}

#menu-button-link {
  width : 120px;
  height: 80px;
  cursor: pointer;
  border: 2px solid #000;
  font-size: 1.6em;
  font-family: Arial;
}

jQuery

// https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
// JS on DOM ready

$menuButtonLink = $('#menu-button-link');

$(document).on('click', '#menu-button', function(event) {

  $menuButtonLink.text(function () {

    $(this).text().replace("☰", "X");
    alert('unicode character replaced');

  });

});

是否有一个好的网站可以教我用正则表达式捕捉正确的字符，或者这也可以用 jQuery 来完成但没有正则表达式？

我看了这个问题Search and replace unicode character但无法让它工作。

Answer 1

实现此目的的最简单方法是使用正则表达式，因为您可以直接在表达式中使用未转义的字符，如下所示:

$(document).on('click', '#menu-button', function(event) {
    $menuButtonLink.text(function(i, t) {
        return t.replace(/☰/, "X");
    });
});

Working example