Question

我有一个元素的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.

Answer 1

您可以使用jquery css('color')。

<强> Live Demo

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

迭代通过许多元素具有相同的类。

Live Demo

$('.someclass').each(function(){
   alert($(this).css('color'))    
});

Answer 2

如果要将所有十六进制颜色转换为字符串str中的十进制RGB值，以下操作就可以了。注意，这仅考虑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) + ')';
})

Answer 3

使用the function shown here，您可以更改页面上从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)
    }
}

Answer 4

您可以执行以下操作：

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

最后会添加一个额外的逗号，如rgb（255,0,0，），但我认为你可以删除它。

使用字符串中的rgb值搜索和替换十六进制颜色代码

4 个答案: