鍍金池/ 問答/Java  C++  HTML/ JS正則修改HTML字符串里面的屬性

JS正則修改HTML字符串里面的屬性

假如有如下字符串

<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;棕櫚油是從油棕樹上的棕果中榨取出來的，果肉壓榨出的油稱為棕櫚油，而果仁壓榨出的油稱為棕櫚仁油，兩種油的成分大不相同。棕櫚油主要含有棕櫚酸和油酸兩種最普通的脂肪酸，它被人們當(dāng)成天然食品來使用已超過五千年的歷史。就在于其極佳的天然保健功效,<a class=\"channel_keylink\" href=\"http://www.cnkang.com/nxjk/mrmf/\" style=\"text-decoration:none;color:#003399;line-height:22px;\">美容</a>功效和理想的烹調(diào)用途。棕櫚油價格相比其它油價是便宜的。散裝的棕櫚油價格6元左右。是世界上唯一以自然狀態(tài)的形式供人類食用的木本植物油。\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>擴展閱讀：棕櫚油營養(yǎng)成分</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%的飽和脂肪。油脂是飽和脂肪、單不飽和脂肪、多不飽和脂肪三種成分混合構(gòu)成的。人體對棕櫚油的<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;作為一種飽和度較高的油脂，棕櫚油曾經(jīng)被推測有可能會增加人體血清中膽固醇含量。但經(jīng)過許多專家進一步的實驗論證，發(fā)現(xiàn)食用棕櫚油不但不會增加血清中的膽固醇，反而有降低膽固醇的趨勢，原因是大量研究數(shù)據(jù)顯示，不同的飽和脂肪酸對血脂的影響是不同的，棕櫚油中富含中性脂肪酸，促使膽固醇提高的物質(zhì)在棕櫚油中含量微乎其微(1%)，棕櫚油中富含的天然維他命E及三烯生育酚(600-1000mg/kg)、類胡蘿卜素(500-700mg/kg)和亞油酸(10%)對人體的健康十分有益。一些研究人員曾針對不同的人種(歐洲、美洲、亞洲)分別進行研究，結(jié)果表明棕櫚油是一種完全符合人體健康需要的食用植物油。\r\n</p>\r\n</span>

這是通過后臺編輯的一段新聞，但是各種style等屬性太亂了，在前臺顯示的效果不統(tǒng)一，如何去掉標(biāo)簽的各種屬性，只剩下例如
<span>我是文本信息</span>
<p>我是段落</p>
這樣的html字符串，（一些必要的屬性還是要保留的，比如img的src）？

回答
編輯回答
久舊酒

clipboard.png

2017年1月20日 14:19
編輯回答
護她命

其實就是遞歸移除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);
2018年8月15日 09:42
編輯回答
乖乖瀦

只是要去掉style屬性的話，用這個就夠了

str.replace(/style="[^"]*"/g, '')
2017年1月16日 08:01