Как JQuery может анализировать цвета в тексте?

Question

Как разобрать цвета в тексте, если я наберу # 40464f, я бы хотел поймать цвет и применить его немного CSS.

Я знаю, как это сделать с добавленной разметкой,

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

например.

Но я хотел бы знать, возможно ли сделать это автоматически, без необходимости добавлять пометки вручную?

Answer 1

Не совсем зная, что спросили, я просто предоставлю способ сопоставления (HEX) цветов в элементе 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...
    });
});

( 1010 * Демо *)

Обновление
Демонстрация, в которой фактически используются цвета :

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
Основываясь на комментариях, замена встроенного ( демо ):

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

Рабочий пример на JSFiddle.net

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

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

  });

});
</script>

Или, если вы хотите изменить цвет текста, просто используйте .css('color', $('input').val())

Также обратите внимание, чтоваши селекторы должны быть лучше моих!