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

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) {&nbsp; var escapeRegExp = function(string) {&nbsp; &nbsp; return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string&nbsp; }&nbsp; var regex = new RegExp(escapeRegExp(str), "gi");&nbsp; return this.each(function() {&nbsp; &nbsp; this.innerHTML = this.innerHTML.replace(regex, function(matched) {&nbsp; &nbsp; &nbsp; return "<span class=\"" + className + "\">" + matched + "</span>";&nbsp; &nbsp; });&nbsp; });};$("p").highlight("*", "highlight");$("label").highlight("*", "highlight");span.highlight {&nbsp; padding: 5px;&nbsp; display: inline-block;&nbsp; color: #F60;}p {&nbsp; font-family: Verdana;}input::placeholder {&nbsp; color: #F60;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><p>&nbsp; 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>，它就可以正常工作，但是我无法将脚本应用到电子邮件表单的字段