javascript - 在字符串中搜索并用 rgb 值替换十六进制颜色代码

Question

我有一个元素的 HTML 源代码。我想搜索其中的所有十六进制颜色代码并将它们替换为它们的 RGB 等价物。我怎样才能使用 JavaScript 做到这一点？

例如：

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')。

现场演示

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

对于迭代许多元素具有相同的类。

现场演示

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

Answer 2

如果您想将字符串中的所有十六进制颜色转换为十进制 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) + ')';
})

Answer 3

使用此处显示的函数，您可以将页面上已设置为 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,) 但我认为您可以将其删除。