Поиск и замена шестнадцатеричных цветовых кодов значениями rgb в строке

У меня есть источник HTML элемента. Я хочу найти в нем все шестнадцатеричные цветовые коды и заменить их эквивалентами RGB. Как я могу сделать это с помощью JavaScript?

E.g.:

This is <span style="color:#FF0000">red</span> and <span style="color:#3C9310">green</span> color.

следует заменить на

This is <span style="color: rgb(255, 0, 0)">red</span> and <span style="color: rgb(60, 147, 16)">green</span> color.

javascript jquery regex color-codes
person Arvind Bhardwaj    schedule 14.12.2012    source источник
comment
Эти стили встречаются только в промежутках? И это единственный стиль, который вы определяете для промежутков?   -  person Cerbrus    schedule 14.12.2012
comment
Цвета @Cerbrus могут быть в любом элементе (span/div/table и т.д.). И да, я хочу изменить только встроенные определения.   -  person Arvind Bhardwaj    schedule 14.12.2012
comment
Посмотрите здесь, чтобы преобразовать гекса в rgb: stackoverflow.com/a/4262484/1414562   -  person A. Wolff    schedule 14.12.2012
comment
javascripter.net/faq/hextorgb.htm   -  person Stéphane Bruckert    schedule 14.12.2012
comment
Итак, вы хотите, чтобы JavaScript перебирал все элементы DOM. Могу я спросить, зачем вам это нужно?   -  person Cerbrus    schedule 14.12.2012
comment
Этого не следует делать во время выполнения. Будет тормозить.   -  person webnoob    schedule 14.12.2012
comment
С какой стати ты хочешь это сделать? Во-первых, встроенный css - это плохая практика, а во-вторых, это просто не имеет значения, цвет в любом случае будет одинаковым. Я не вижу смысла, я думаю...   -  person elclanrs    schedule 14.12.2012
comment
@Cerbrus Я работаю над постоянным скриптом выделения текста в jQuery, используя базу данных mysql. Я загружаю отмеченные пользователем выборки, сохраняя их в БД. Но IE отображает шестнадцатеричные значения цвета как RGB. Поэтому я не могу выполнить поиск и заменить его исходным кодом HTML в IE. Хотя все остальные браузеры им довольны. Надеюсь, вы поняли мою точку зрения.   -  person Arvind Bhardwaj    schedule 14.12.2012

Ответы (4)


arrow_upward
5
arrow_downward

Если вы хотите преобразовать все шестнадцатеричные цвета в десятичные значения RGB в строке str, вам поможет следующее. Обратите внимание, что здесь учитываются только 8-битные/канальные шестнадцатеричные значения (например, #FF0000), а не 4-битные варианты (например, #F00); однако это было бы достаточно легко улучшить.

var rgbHex = /#([0-9A-F][0-9A-F])([0-9A-F][0-9A-F])([0-9A-F][0-9A-F])/gi
str.replace(rgbHex, function (m, r, g, b) {
  return 'rgb(' + parseInt(r,16) + ','
                + parseInt(g,16) + ','
                + parseInt(b,16) + ')';
})
person Xophmeister    schedule 14.12.2012
comment
это просто потрясающе. Это то, что я искал. Спасибо большое чувак... - person Arvind Bhardwaj; 14.12.2012
comment
@ Arvind07: Ты действительно собираешься string.replace использовать фрагменты кода с RegEx? Это может быть довольно тяжелым для браузера. - person Cerbrus; 14.12.2012
comment
@Cerbrus Строка не очень длинная. Я думаю, что заменить регулярное выражение будет не очень сложно. Также у меня есть строка, с которой можно работать, а не фактический элемент HTML. Так что мне кажется нормально. Ваши предложения всегда приветствуются... - person Arvind Bhardwaj; 14.12.2012
comment
@ Arvind07: А, понятно. Справедливо, тогда ^_^ - person Cerbrus; 14.12.2012

arrow_upward
5
arrow_downward

Вы можете использовать jquery css('color').

Текущая демонстрация

$('#spcolor').css('color')

Для итерации многие элементы имеют один и тот же класс.

Текущая демонстрация

$('.someclass').each(function(){
   alert($(this).css('color'))    
});
person Adil    schedule 14.12.2012
comment
Это было так просто, но я не понял этого. Спасибо, в любом случае :) - person Arvind Bhardwaj; 14.12.2012
comment
Не беспокойтесь, иногда мы скучаем по простым и универсальным решениям... - person Adil; 14.12.2012
comment
Возможно, вы захотите упомянуть об использовании '*' в качестве селектора для перебора всех элементов. - person Cerbrus; 14.12.2012

arrow_upward
2
arrow_downward

Используя функцию, показанную здесь, вы можете измените свойство цвета всех элементов на странице, для которых оно установлено с Hex на RGB:

var all = document.getElementsByTagName("*");
var elemCount = all.length;

for (var i=0; i < elemCount; i++) {
    if(all[i].style.color && all[i].style.color.indexOf('#') > -1){ //Check if the color property is set, and if it's hex.
        all[i].style.color = hex2rgb(all[i].style.color)
    }
}
person Cerbrus    schedule 14.12.2012
comment
Хороший. Вероятно, это выглядело бы чище, чем jQuery, но логика та же. - person Captain Kenpachi; 14.12.2012
comment
@Cerbrus Спасибо за ответ. Его действительно легко понять и реализовать. - person Arvind Bhardwaj; 14.12.2012
comment
@JuannStrauss: Да, возможно, это выглядело бы чище, но в jQuery это будет намного медленнее. Для чего-то вроде этого: короткий код, но большой цикл, я предпочитаю использовать собственный JS... Arvind07: В этом случае, пожалуйста, рассмотрите возможность пометить это как свой ответ, если это работает для вас ^_^ - person Cerbrus; 14.12.2012

arrow_upward
1
arrow_downward

Вы можете сделать что-то вроде:

rgbval = "rgb("
"#ff0000".replace(/[a-z0-9]{2}/g, function(val) {rgbval  += (parseInt(val, 16)) + ","})
rgbval  += ")"

В конце будет добавлена ​​​​лишняя запятая, например rgb (255,0,0,), но я думаю, вы можете ее удалить.

person user160820    schedule 14.12.2012