Question

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

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

在unicode字符之前还有一些文本Menu（后跟一个空格），我不想改变，因为它的字体大小是用FlowType.js动态调整的，意思是如果我改变整个批次，被替换的字体大小不一样，这使得设计非常难看。

这是我尝试的但不知何故它没有用引号捕捉字符而且我在正则表达式上没用。

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("&#9776;", "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

在HTML中，点击

1 个答案: