jquery - JQuery 如何解析文本中的颜色？

Question

如何解析文本中的颜色，如果我输入 #40464f ，我想捕捉颜色并应用一些 CSS。

我知道如何通过添加标记来做到这一点，

 <span data-color=""> #40464f </span>

例如。

但我想知道是否可以自动执行此操作而无需手动添加标记？

Answer 1

我真的不知道要求什么，我只是提供一种在 HTML 元素中匹配(十六进制)颜色的方法。

给定 HTML:

<p id="subject">
    Here is a color: #fff. Red is #ff0000 while #9ab57d is another color.
</p>

使用 JS:

$(function() {
    var m = $('#subject').text().match(/#(?:[0-9a-f]{3}){1,2}/gi);
    // ['#fff', '#ff0000', '#9ab57d']

    $.each(m, function(i, v) {
        // `v` is each color...
    });
});

( Demo )

更新
Demo where the colors are actually used :

HTML:

<p id="subject">
    Here is a color: #fff. Red is #ff0000 while #9ab57d is another color.
</p>
<ol id="result"></ol>

JS:

$(function() {
    var m = $('#subject').text().match(/#(?:[0-9a-f]{3}){1,2}/gi),
        $result = $('#result');

    $.each(m, function(i, v) {
        $('<li />').text(v).css('background-color', v).appendTo($result);
    });
});

更新 #2
根据评论，替换内联( demo ):

HTML:

<p id="subject">
    Nous obtenons les 2 couleurs suivantes : #40464f &amp; #0f131a
</p>

JS:

$(function() {
    var $subject = $('#subject'),
        str = $subject.html();

    str = str.replace(/#(?:[0-9a-f]{3}){1,2}/gim, "<span style=\"background-color: $&;\">$&</span>");
    $subject.html(str);
});