Как я могу выбрать и стилизовать звездочку в строке?

Question

Мне нужно установить определенный c цвет для специального символа.

В частности, я бы хотел установить звездочку * в <div> на цвет 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

Я пытался ввести код, но происходит странная вещь. Если я помещаю все в <div>, это работает без проблем, однако я не могу применить скрипт к полям формы электронной почты