正则表达式来删除背景色样式

regular expression to remove background-color styles

本文关键字：样式 背景色 删除 正则表达式      更新时间：2023-09-26

我想遍历div中的文本，并将"background color:[anything]；"替换为"。基本上，我想删除所有的内联背景颜色样式。

看来JavaScript的

             string.replace(regex,str)

是正确的工具，但regex首先找到"background-color:"，然后将其加上后面的任何内容，并将下一个"；"替换为"并不清楚。

有人能把我推向正确的方向吗？

感谢

您可以使用以下脚本执行此操作：

var all = document.body.getElementsByTagName('*');
for (var i=0;i<all.length;i++) {
    if (all[i].style.backgroundColor) {
        all[i].style.backgroundColor = '';
    }
}

我之所以使用DOM循环而不使用regex，有两个原因：

  • 如果你使用regex，你必须让它适用于每一种背景颜色，所以你必须匹配background-color:#fff;，也要匹配background-color: /*either #fff; or #000;*/#fff;，因为注释也可以放在那里。您需要太多的正则表达式才能使其完美工作，而此脚本可以为您完成所有工作
  • 通过修改HTML代码而不是DOM节点，您还可以删除附加到元素的所有事件处理程序。这意味着其他脚本可能不再工作，因为您已经删除了所有事件处理程序

我刚刚在JSFiddle中创建了一个快速、纯JS、无正则表达式的解决方案。它（递归地）遍历元素的每个子节点，如果它不是文本节点，则将background-color设置为transparent（有效地删除它）。

function removeChildBackgrounds(element) {
    var children = element.childNodes;
    for(var i = 0; i < children.length; i++) {
        var node = children[i];
        if(node.nodeName !== '#text') {
            node.style.backgroundColor = 'transparent';
            if(node.hasChildNodes()) {
                removeChildBackgrounds(node);
            }
        }
    }
}

请参阅此处的JSFiddle。

链接：

  • .childNodes
  • .hasChildNodes()
  • .style

谢谢Joey和Sam。

事实证明，乔伊的想法正是我所需要的。转换到jQuery后，利用cellContent$是execCommand最后一次处理的外部div，并且它总是将背景颜色放在<span>元素中的知识，它变成了：

cellContent$.find('span')
            .each(function() {
              if(this.style.background) {
                this.style.background = '';
              }
             });

谢谢你们两个！

相关文章：