用正则判断一个小条件，帮帮忙

Question

问题：

把HTML标签中的src style controls属性以外的属性全部替换成空，

**并且**

style里面的属性，只留下 background 和 color 两个style属性 ，其他也全部替换成空，小弟实在不会，先谢谢### 问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

为了保留拓展性，大概思路可以这样。

/*
  reserveAttr 需要保留的属性,null表示全保留
  reserveStyle 需要保留的style中的具体样式,null表示全保留
*/
function formateHtml(str="", reserveAttr=[], reserveStyle=[]){
  return str.replace(/(<[\w|-]+)(.*?)(\/?>)/ig,(...arg)=>arg[1] + arg[2].replace(/([\w|-]+)((=)(['|"])(.*?)(['|"]))?/ig,(...attr)=>!reserveAttr || reserveAttr.includes(attr[1].toLowerCase()) ? (['style'].includes(attr[1].toLowerCase()) ? (attr[1] + attr[3] + attr[4] + attr[5].replace(/([\w|-]+)\s*:[^;]+;?/ig,(...style)=>!reserveStyle || reserveStyle.includes(style[1].toLowerCase()) ? style[0] : '') + attr[6]) : attr[0] ) : '') + arg[3]);
}


//测试例子
var str = `<a> </a><img :src="imgSrc" draggable style="background:red;width:500;color:blue"/>文本<img src="src1" style="color:red;" /><IMG :STYLE="SRC2" /><el-input v-Model="val"></el-input><bb src="bbsrc" disabled >bb内容</bb>`;
console.log(formateHtml(str,['style','src','controls'],['background','color']));

Answer 2

//过滤属性

//js
var reg = '/<([A-Za-z]+)[^>]+((class|style|controls)=".*?")([^>]+)?>/g';
str.replace(reg,'<$1 $2>');

//php
$reg = '/<([A-Za-z]+)[^>]+((class|style|controls)=".*?")([^>]+)?>/';
echo htmlspecialchars((preg_replace_callback($reg, function ($matches) {
  return '<' . $matches[1] . ' ' . $matches[2] . '>';
}, $str)));

过滤style
var reg = /style="(?:((?:background|color)[^;"]+;)+)?((?:(?!background|color)[^;"]+;)+)?(?:((?:background|color)[^;"]+;)+)?((?:(?!background|color)[^;"]+;)+)?/g;
str.replace(reg,function(){
  return 'style="'+(arguments[1] || '')+(arguments[3] || '');
});

Answer 3

上面的答案没有了解,不过,我觉得既然是针对html的,那么还是用dom比较好,而不是用正则.我总感觉这里很多时候都是滥用正则