如何在字符串中选择星号并设置其样式？

Question

我需要为特殊字符设置特定颜色。具体来说，我想将*a 中的星号设置<div>为 color red，而不直接干预<div>.我在网上找到了这个项目，它实际上是为角色设置背景颜色，但是如果我将脚本改编为 * 符号，它就不起作用。输出示例：$("p").highlight("*","highlight");jQuery.fn.highlight = function (str, className) {        var regex = new RegExp(str, "gi");    return this.each(function () {        this.innerHTML = this.innerHTML.replace(regex, function(matched) {return "<span class=\"" + className + "\">" + matched + "</span>";});    });};$("p").highlight("*","highlight");span.highlight{   background:#F60;    padding:5px;    display:inline-block;    color:#FFF;}p{   font-family:Verdana;   }<p>    Let's *go Zapata let's do it for the revolution, Zapatistas*!!!   </p>如果我不Z输入星号，则*脚本将不起作用。有人可以帮忙吗？

Answer 1

您需要转义星号，因为它在正则表达式中也很重要。使用\\*：

编辑：按照@DBS的建议，最好在突出显示功能本身中添加此转义检查。代码已修改。

jQuery.fn.highlight = function(str, className) {

  var escapeRegExp = function(string) {

    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string

  }

  var regex = new RegExp(escapeRegExp(str), "gi");

  return this.each(function() {

    this.innerHTML = this.innerHTML.replace(regex, function(matched) {

      return "<span class=\"" + className + "\">" + matched + "</span>";

    });

  });

};

$("p").highlight("*", "highlight");

$("label").highlight("*", "highlight");

span.highlight {

  padding: 5px;

  display: inline-block;

  color: #F60;

}

p {

  font-family: Verdana;

}

input::placeholder {

  color: #F60;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>

  Let's *go Zapata let's do it for the revolution, Zapatistas*!!!

</p>

<label for="txt">Email* </label>

<input placeholder="Email*" type="text" id="txt"/>

Answer 2

我尝试输入代码，但发生了奇怪的事情。如果我将所有内容都放入 a 中<div>，它就可以正常工作，但是我无法将脚本应用到电子邮件表单的字段