Question

我正在尝试更改星号的颜色，但我无法定位匹配的字符。

是否有人知道您如何定位特定文字以将其更改为红色？

我的下面的代码更改将文本添加为红色。

$('.highlight').find('*').css('color','#ff0000');

Answer 1

这比你想象的要复杂得多。您需要修改HTML并添加一些包裹元素，如<span>。你可以这样做：

$("p").each(function() {
    var html = $(this).html().replace(/\*/g, "<span class=\"asterisk\">*</span>");
    $(this).html(html).find(".asterisk").css("color", "red");
});

Live example

Answer 2

尝试以下方法：

$('.highlight').each(function(){
  this.innerHTML = this.innerHTML.replace(/\*/g, '<span class="asterisk">*</span>');
});

参见示例：http://jsfiddle.net/4XrSS/

Answer 3

在其周围放置span（或其他内联级元素）并设置span的样式。

JS：

var text = $('.highlight').text();
$('.highlight').html(text.replace('*', '<span>*</span>'));

CSS：

.highlight span {
    color: #ff0000;
}

修改：oops，find（'*'）无效，请使用replace

Answer 4

find使用指定的选择器返回元素。由于*将匹配所有元素，因此它基本上是无操作。你要做的是选择一个元素的一部分。这是不可能的。您必须先在星号周围创建一个特定元素。

<强>解决方案：

您可以使用辅助方法将*中的所有span打包为自定义类：

$('.highlight').each(function() { 
    var regex = new RegExp('\*', 'g'); 

    this.innerHTML = this.innerHTML.replace(regex, '<span class="hilite">*</span>'); 
}

）

然后，您只需应用hilite类所需的格式。

修改：代码已从此处Highlight a word with jQuery修改，还有一些建议可能有所帮助。

Edit2：在评论和评论中添加了建议。上面的解释

Answer 5

我是基于此SO answer

写的

CSS：

.red { color: red; }

jQuery的：

$("body :contains('*')").html(function() {
    return $(this).html().replace('*', '<span class="red">*</span>');
});

http://jsfiddle.net/EUb3Y/

Answer 6

不确定您的完成输出应该是什么样子，但可能是“：before”css选择器和“content”属性的有趣应用程序。你可以做点像......

.div-with-asterisk:before {
    content: "*";
    color: red;
 }

参考：http://www.w3schools.com/cssref/sel_before.asp

在div中更改星号的颜色

6 个答案: