我需要為特殊字符設置特定顏色。具體來說，我想將*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輸入星號，則*腳本將不起作用。有人可以幫忙嗎？
2 回答
幕布斯7119047
TA貢獻1794條經驗 獲得超8個贊
您需要轉義星號，因為它在正則表達式中也很重要。使用\\*：
編輯：按照@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"/>
- 2 回答
- 0 關注
- 177 瀏覽
添加回答
舉報
0/150
提交
取消