Question

我正在尝试通过一个简单的document.body.innerHTML检索从我（基于网络）的文本编辑器中检索HTML内容，该方法工作正常。

出于各种原因，我希望所有的css颜色引用（例如，字体，边框，背景色等）都采用十六进制表示法，而不是rgb（）表示法。

例如，要将所有rgb值转换为fontcolors的十六进制，我使用函数rgb2hex（）：

var elems =     this.cont_doc.getElementsByTagName('*');
var len =       elems.length;
for(var n=0;n<len;n++)
{
    if(elems[n].style.getPropertyValue('color'))
    {
        var color = this.rgb2hex(elems[n].style.getPropertyValue('color'));//e.g rgb(255,38,0) becomes #ff2600 
        elems[n].style.setProperty('color',color);  
    }
}

但是，当我将颜色设置为十六进制格式时，总是输出最终的rgb值，例如var output_string = this.cont_doc.body.innerHTML;。有没有办法保留十六进制格式，或者我可以在最终的output_string中应用正则表达式解决方案？

谢谢你帕特里克

Answer 1

据我了解，Chrome会在请求rgb时将所有人强制移至innerHTML。您可以在HTML Tough上轻松使用正则表达式。

这是一个示例，只需在您的innerHTML上使用它即可。

go.addEventListener('click', _ => {
  const replaceRGB = (all, r, g, b) => [r, g, b].reduce((a, x) => a + (+x).toString(16).padStart(2, '0'), '#');
  output.value = input.value.replace(/rgb\(\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\s*\)/g, replaceRGB);
});

<textarea id="input">
rgb(255, 50, 15);
</textarea>
<textarea id="output">
</textarea>
<button id="go">Process</button>

在HTML输出中强制CSS Hexcode

1 个答案: