JS正则修改HTML字符串里面的属性

Question

假如有如下字符串

<span style=\"color:#333333;font-family:Simsun;font-size:14px;line-height:23px;text-align:justify;white-space:normal;background-color:#FFFFFF;\">&emsp;<img src=\"http://www.lyfxly.com//upload/201607/07/201607070946214878.jpg\" alt=\"\" />棕榈油是从油棕树上的棕果(Elaeis Guineensis)中榨取出来的，果肉压榨出的油称为棕榈油( Palm Oil)，而果仁压榨出的油称为棕榈仁油(Palm Kernel Oil)，两种油的成分大不相同。\r\n<p style=\"font-size:14px;line-height:23px;color:#333333;font-family:Simsun;text-align:justify;white-space:normal;background-color:#FFFFFF;\">\r\n\t<strong>棕榈油的功效和作用</strong> \r\n</p>\r\n<p style=\"font-size:14px;line-height:23px;color:#333333;font-family:Simsun;text-align:justify;white-space:normal;background-color:#FFFFFF;\">\r\n\t&emsp;&emsp;棕榈油含有饱和脂肪酸和不饱和脂肪酸的比例均衡，大约有44%的棕榈酸，5%的硬脂酸(两种均为饱和酸)，40%的油酸(不饱和酸)，10%的亚油酸和0.4%的α-亚麻酸(两种都是多不饱和酸)。像其它植物油一样，棕榈油不含胆固醇(4，5)。具有抗氧化性、抗癌和降低胆固醇等对健康有益的特性。\r\n</p>\r\n<p style=\"font-size:14px;line-height:23px;color:#333333;font-family:Simsun;text-align:justify;white-space:normal;background-color:#FFFFFF;\">\r\n\t&emsp;&emsp;棕榈油是从油棕树上的棕果中榨取出来的，果肉压榨出的油称为棕榈油，而果仁压榨出的油称为棕榈仁油，两种油的成分大不相同。棕榈油主要含有棕榈酸和油酸两种最普通的脂肪酸，它被人们当成天然食品来使用已超过五千年的历史。就在于其极佳的天然保健功效,<a class=\"channel_keylink\" href=\"http://www.cnkang.com/nxjk/mrmf/\" style=\"text-decoration:none;color:#003399;line-height:22px;\">美容</a>功效和理想的烹调用途。棕榈油价格相比其它油价是便宜的。散装的棕榈油价格6元左右。是世界上唯一以自然状态的形式供人类食用的木本植物油。\r\n</p>\r\n<p style=\"font-size:14px;line-height:23px;color:#333333;font-family:Simsun;text-align:justify;white-space:normal;background-color:#FFFFFF;\">\r\n\t&emsp;&emsp;<strong>扩展阅读：棕榈油营养成分</strong> \r\n</p>\r\n<p style=\"font-size:14px;line-height:23px;color:#333333;font-family:Simsun;text-align:justify;white-space:normal;background-color:#FFFFFF;\">\r\n\t&emsp;&emsp;棕榈油也被称为饱和油脂，因为它含有50%的饱和脂肪。油脂是饱和脂肪、单不饱和脂肪、多不饱和脂肪三种成分混合构成的。人体对棕榈油的<a class=\"channel_keylink\" href=\"http://www.cnkang.com/nkwk/xiaohua/\" style=\"text-decoration:none;color:#003399;line-height:22px;\">消化</a>和吸收率超过97%，和其他所有植物食用油一样，棕榈油本身不含有胆固醇。\r\n</p>\r\n<p style=\"font-size:14px;line-height:23px;color:#333333;font-family:Simsun;text-align:justify;white-space:normal;background-color:#FFFFFF;\">\r\n\t&emsp;&emsp;作为一种饱和度较高的油脂，棕榈油曾经被推测有可能会增加人体血清中胆固醇含量。但经过许多专家进一步的实验论证，发现食用棕榈油不但不会增加血清中的胆固醇，反而有降低胆固醇的趋势，原因是大量研究数据显示，不同的饱和脂肪酸对血脂的影响是不同的，棕榈油中富含中性脂肪酸，促使胆固醇提高的物质在棕榈油中含量微乎其微(1%)，棕榈油中富含的天然维他命E及三烯生育酚(600-1000mg/kg)、类胡萝卜素(500-700mg/kg)和亚油酸(10%)对人体的健康十分有益。一些研究人员曾针对不同的人种(欧洲、美洲、亚洲)分别进行研究，结果表明棕榈油是一种完全符合人体健康需要的食用植物油。\r\n</p>\r\n</span>

这是通过后台编辑的一段新闻，但是各种style等属性太乱了，在前台显示的效果不统一，如何去掉标签的各种属性，只剩下例如
<span>我是文本信息</span>
<p>我是段落</p>
这样的html字符串，（一些必要的属性还是要保留的，比如img的src）？

Answer 1

其实就是递归移除style属性吧？

/**
 * 移除 style 属性
 */
function removeStyle(node) {
    if (node.hasAttribute('style')) {
        node.removeAttribute('style');
    }
}
/**
 * 递归清除
 */
function clean(children) {
    for (let i = 0, l = children.length; i < l; i += 1) {
        const child = children[i];
        removeStyle(child);
        if (child.children) {
            clean(child.children);
        }
    }
}
const container = document.querySelector('.container');
container.innerHTML = result; // result 就是你的富文本
const children = container.children;
clean(children);

Answer 2

只是要去掉style属性的话，用这个就够了

str.replace(/style="[^"]*"/g, '')

Answer 3