Question

如何解析文本中的颜色，如果我键入＃40464f，我想抓住颜色并将其应用于CSS。

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

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

例如。

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

Answer 1

不知道问的是什么，我只是提供一种在HTML元素中匹配（HEX）颜色的方法。

给定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);
});

Answer 2

由于我认为这是 span 中的文字，您希望检查我认为正则表达式匹配是你必须去的方式。

这是一个允许使用regexp选择元素的过滤器。

http://james.padolsey.com/javascript/regex-selector-for-jquery/

Answer 3

Working Example on JSFiddle.net

<input /> <button>Change</button> <div></div>
<script>
$(function(){
  $('button').click(function(){

    $('div').css('background-color', $('input').val());  

  });

});
</script>

或者如果它是您想要更改的文字颜色，请使用.css('color', $('input').val())

另外，请注意您的选择器应该比我的好！

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

3 个答案: