博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

js正则匹配html标签中的style样式和img标签

Posted on 2018-04-13 11:22  人生梦想起飞  阅读(6026)  评论(0)  编辑  收藏  举报 
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script>
		var str = "各<span style='color : darkred;'><b>种</b></span><span style='color : red;'><b>嵌</b></span><span style='color : orange;'><b>套</b></span><span style='color : yellow;'><span style='font-size: 16pt;'><b>样</b></span></span><span style='color : palegreen;'><span style='font-size: 16pt;'>式</span></span><span style='color : green;'><span style='font-size: 16pt;'>外</span><span style='color : deepskyblue;'><span style='font-size: 16pt;'>加</span><span style='color : blue;'><span style='font-size: 16pt;'>其</span></span><span style='color : darkblue;'>它</span></span></span><span style='color : purple;'>y</span>w标签<br>\yw111{<span style='font-size: 10pt;'><span style='color : green;'>9</span></span><span style='font-size: 12pt;'><span style='color : green;'>9</span></span><span style='color : green;'>9</span><span style='font-size: 16pt;'>9</span><span style='font-size: 18pt;'>9</span>ffffff}<br>发反反\{复复"
		var reg = /<span\s+style=[\'\"]font-size\s*:\s*\d+pt;[\'\"]>/ig;
		var reg10 = /10pt/g;
		var reg12 = /12pt/g;
		var reg14 = /14pt/g;
		var reg16 = /16pt/g;
		var reg18 = /18pt/g;
		
		var str2 = str.replace(reg,function(exp){
			console.log(exp)
			var red2 = exp.split('font-size')[1].replace(/[^0-9]/ig,"");
			// if(red2.test(exp)){
				return exp.replace(red2,parseFloat(red2)+6);

			// }
			var str1 = ''
			// if(reg10.test(exp)){
			// 	str1 = exp.replace(reg10,'16pt');
			// }else if(reg12.test(exp)){
			// 	str1 = exp.replace(reg12,'18pt');
			// }else if(reg14.test(exp)){
			// 	str1 = exp.replace(reg14,'20pt');
			// }else if(reg16.test(exp)){
			// 	str1 = exp.replace(reg16,'22pt');
			// }else if(reg18.test(exp)){
			// 	str1 = exp.replace(reg18,'24pt');
			// }
			//return str1;
		})

		console.log(str2)
		

	</script>
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		p:first-letter{
			color: green;
		}
	</style>
</head>
<body>
	<div>
	   <p>各<span style='color : darkred;'><b>种</b></span><span style='color : red;'><b>嵌</b></span><span style='color : orange;'><b>套</b></span><span style='color : yellow;'><span style='font-size: 16pt;'><b>样</b></span></span><span style='color : palegreen;'><span style='font-size: 16pt;'>式</span></span><span style='color : green;'><span style='font-size: 16pt;'>外</span><span style='color : deepskyblue;'><span style='font-size: 16pt;'>加</span><span style='color : blue;'><span style='font-size: 16pt;'>其</span></span><span style='color : darkblue;'>它</span></span></span><span style='color : purple;'>y</span>w标签<br>\yw111{<span style='font-size: 10pt;'><span style='color : green;'>9</span></span><span style='font-size: 12pt;'><span style='color : green;'>9</span></span><span style='color : green;'>9</span><span style='font-size: 16pt;'>9</span><span style='font-size: 18pt;'>9</span>ffffff}<br>发反反</p>
    </div>
	<script>
		var str = "各<span src='http://oo'> style='color : darkred;'><b>种</b></span><img src='8> style='color : red;'><img alt='' src='http://oo.xesimg.com/test_library/img/2018/03/30/t_90460_47_172x63.png?1522399280'><b>嵌</b></span><span style='color : orange;'><b>套</b></span><span style='color : yellow;'><span style='font-size: 16pt;'><b>样</b></span></span><span style='color : palegreen;'><span style='font-size: 16pt;'>式</span></span><span style='color : green;'><span style='font-size: 16pt;'>外</span><span style='color : deepskyblue;'><span style='font-size: 16pt;'>加</span><span style='color : blue;'><span style='font-size: 16pt;'>其</span></span><span style='color : darkblue;'>它</span></span></span><span style='color : purple;'>y</span>w标签<br>\yw111{<span style='font-size: 10pt;'><span style='color : green;'>9</span></span><span style='font-size: 12pt;'><span style='color : green;'>9</span></span><span style='color : green;'>9</span><span style='font-size: 16pt;'>9</span><span style='font-size: 18pt;'>9</span>ffffff}<br>发反反\{复复"
		var reg = /<img.*?src=[\'\"]http(s)?:.*?>/ig;
		var reg10 = /http(s)?:/ig;
		
		var str2 = str.replace(reg,function(exp){
			console.log('-----------')
			console.log(exp)
			console.log(exp.replace(reg10,''))
			return exp.replace(reg10,'');
			// var red2 = exp.split('font-size')[1].replace(/[^0-9]/ig,"");
			// // if(red2.test(exp)){
			// 	return exp.replace(red2,parseFloat(red2)+6);

			// // }
			
			// if(reg10.test(exp)){
			// 	str1 = exp.replace(reg10,'16pt');
			// }else if(reg12.test(exp)){
			// 	str1 = exp.replace(reg12,'18pt');
			// }else if(reg14.test(exp)){
			// 	str1 = exp.replace(reg14,'20pt');
			// }else if(reg16.test(exp)){
			// 	str1 = exp.replace(reg16,'22pt');
			// }else if(reg18.test(exp)){
			// 	str1 = exp.replace(reg18,'24pt');
			// }
			//return str1;
		})

		console.log(str2)
		

	</script>
</body>
</html>

 

<script>
var _stem = '已知$$\angle 1=30$$度，$$\angle 3=40$$度，那么$$\angle 2=$$<span class='test_blank' style='width:96px'> </span>度.<br>
<img src="http://oo.xesimg.com/test_library/img/2018/03/30/t_90460_47_172x63.png?1522399280">';

//_stem = _stem.replace(/(<img\s)+(src=[\'\"])(http(s)?:)/gi,'$1$2','');
_stem = _stem.replace(/(<img\s)+(src=[\'\"])(http(s)?:)/gi,'$1$2');
console.log(_stem)

</script>