javascript - 在 HTML 输出中强制使用 CSS 十六进制代码

Question

我正在尝试通过一个简单的 document.body.innerHTML 检索从我的(自制的)基于 Web 的文本编辑器检索 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 在请求 innerHTML 时强制所有的 rgb。您可以轻松地在 HTML 上使用正则表达式。

这是一个示例，只需在您的 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>