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

我有一个元素的HTML源代码。我想搜索其中的所有十六进制颜色代码，并用它们的RGB等价物替换它们。如何使用JavaScript实现这一点

例如：

这是红色和绿色。

应替换为

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

这是红色和绿色。

您可以使用jquery

css（'color'）

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

对于遍历多个元素，具有相同的类

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

---

您可以使用jquery

css（'color'）

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

对于遍历多个元素，具有相同的类

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

---

您可以执行以下操作：

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

---

将在末尾添加一个额外的逗号，如rgb（255,0,0），但我认为您可以删除它。

您可以执行以下操作：

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

将在末尾添加一个额外的逗号，如rgb（255,0,0），但我认为您可以删除它。

使用，您可以将页面上所有元素的颜色属性从十六进制设置为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)
    }
}

var all=document.getElementsByTagName（“*”）；
var elemCount=全部长度；
对于（变量i=0；i-1{//检查是否设置了color属性，以及它是否为十六进制。
all[i].style.color=hex2rgb（all[i].style.color）
}
}

使用，您可以将页面上所有元素的颜色属性从十六进制设置为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)
    }
}

var all=document.getElementsByTagName（“*”）；
var elemCount=全部长度；
对于（变量i=0；i-1{//检查是否设置了color属性，以及它是否为十六进制。
all[i].style.color=hex2rgb（all[i].style.color）
}
}

如果您想将字符串

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) + ')';
})

---

如果您想将字符串

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) + ')';
})

---

---

这些样式仅在跨度中出现？这是您为span定义的唯一内联样式吗？@Cerbrus颜色可以在任何元素中（span/div/table等）。是的，我只想更改内联定义，所以你想让JavaScript遍历所有DOM元素。我可以问你为什么需要这个吗？这不应该在运行时完成。它会变慢。你到底为什么要这样做？首先，内联css是一种不好的做法，其次，它只是没有关系，颜色将是相同的任何方式。我不明白我猜的重点…这些样式只出现在跨度中？这是您为span定义的唯一内联样式吗？@Cerbrus颜色可以在任何元素中（span/div/table等）。是的，我只想更改内联定义，所以你想让JavaScript遍历所有DOM元素。我可以问你为什么需要这个吗？这不应该在运行时完成。它会变慢。你到底为什么要这样做？首先，内联css是一种不好的做法，其次，它只是没有关系，颜色将是相同的任何方式。我看不出有什么意义，我想…不错。也许jQuery的方式看起来更干净，但逻辑是一样的。@Cerbrus谢谢你的回答。它真的很容易理解和实现。@JuannStrauss:它看起来可能更干净，是的，但在jQuery中也会慢很多。对于这样的情况：代码短但循环大，我更喜欢使用原生JS。。。ARVID07：在这种情况下，请考虑把这个标记为你的答案，如果它对你有用的话。也许jQuery的方式看起来更干净，但逻辑是一样的。@Cerbrus谢谢你的回答。它真的很容易理解和实现。@JuannStrauss:它看起来可能更干净，是的，但在jQuery中也会慢很多。对于这样的情况：代码短但循环大，我更喜欢使用原生JS。。。ARVID07：在这种情况下，请考虑把这个标记为你的答案，如果它对你有用^ ^它是如此容易，但我没有弄明白。无论如何，谢谢：）不用担心，有时我们会错过简单的解决方案和每个解决方案……您可能会提到使用

'*'

作为选择器来循环所有元素。这很简单，但我没有弄明白。无论如何，谢谢：）不用担心，有时我们会错过简单的解决方案和每个解决方案……您可能想提到使用

'*'

作为选择器来循环所有元素。这太棒了。这就是我一直在寻找的。非常感谢，伙计…@Arvind07:你真的要

字符串吗？用
正则表达式替换你的
代码片段？这可能会使浏览器负担过重。@Cerbrus字符串不是很长。我认为替换正则表达式不会太重。此外，我还可以使用字符串，而不是实际的HTML元素。所以我觉得还可以。欢迎你的建议……@Arvind07：啊，我明白了。很公平，这太棒了。这就是我一直在寻找的。非常感谢，伙计…@Arvind07:你真的要
字符串吗？用
正则表达式替换你的
代码片段？这可能会使浏览器负担过重。@Cerbrus字符串不是很长。我认为替换正则表达式不会太重。此外，我还可以使用字符串，而不是实际的HTML元素。所以我觉得还可以。欢迎你的建议……@Arvind07：啊，我明白了。那就很公平了^_^