JavaScript正则表达式给html字符串的img标签增加style样式

平时我们使用正则表达式更多的是提取、过滤等，比如提取html字符串中的图片呀等等，而最近遇到的一个问题是要给html字符串中的img标签增加style样式，就想到了使用正则表达式，主要是对正则表达式的使用。

我们知道html字符串中的图片img标签，有的是有style的，有的是没有的，比如：

<div style="background-color:green;width:500px;">
<p>are you ok?</p>
<img style="border:1px solid #ff0000;" src="https://iph.href.lu/100x100" alt="" />
hello word^_^
<span>哈哈
<IMG src='https://iph.href.lu/100x100'></span><span style="font-size:20pt;">
我是大神</span>
</div>

解决思路一：分别查找。查找有style属性的img标签，给style追加样式，我们不能清除原有的样式；没有style属性的img标签就简单了，直接增加style属性和样式就可以了。

解决思路二：给没有style属性的img标签，先增加style=" "，然后再给所有的img标签追加样式。

这里笔者使用的是思路二，

第一步：先用正则表达式给没有style属性的img标签，先增加style=" "，实现的效果如下（完整的正则表达式在后文）：

经过第一步，所有的img标签都有style属性了，我们再给所有的img标签追加样式，实现效果如下：

这样我们就成功的给html字符串中的img标签增加了样式，如果要给其他标签加样式也是同样的道理。

完整的实现代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript正则表达式给html字符串的img标签增加style样式</title>
</head>
<body>
<div id="demo" style="width:667px;margin:auto;border:2px solid green;"></div>
<script>function imgTagAddStyle(htmlstr){//正则匹配所有img标签//var regex0 = new RegExp("(i?)(\<img)([^\>]+\>)","gmi");//正则匹配不含style="" 或 style='' 的img标签var regex1 = new RegExp("(i?)(\<img)(?!(.*?style=['\"](.*)['\"])[^\>]+\>)","gmi");//给不含style="" 或 style='' 的img标签加上style=""htmlstr = htmlstr.replace(regex1, "$2 style=\"\"$3");console.log("增加style=\"\"后的html字符串："+htmlstr);//正则匹配含有style的img标签var regex2 = new RegExp("(i?)(\<img.*?style=['\"])([^\>]+\>)","gmi");//在img标签的style里面增加css样式(这里增加的样式：display:block;max-width:100%;height:auto;border:5px solid red;)htmlstr = htmlstr.replace(regex2, "$2display:block;max-width:100%;height:auto;border:5px solid red;$3");console.log("在img标签的style里面增加样式后的html字符串："+htmlstr);return htmlstr;}var str0 = "<div style=\"background-color:green;width:500px;\"><p>are you ok?</p><img style=\"border:1px solid #ff0000;\" src=\"https://iph.href.lu/100x100\" alt=\"\" />hello<span>the<IMG src='https://iph.href.lu/100x100'></span><span style=\"font-size:20pt;\">我是大神</span></div>";console.log("原始html字符串："+str0);var s = imgTagAddStyle(str0);document.getElementById("demo").innerHTML=s;</script>
</body>
</html>

小贴士：正则表达式replace中有$2 $3 ...这样的是表示正则表达式的小括号里匹配的内容。

JavaScript正则表达式给html字符串的img标签增加style样式相关推荐

html字符串img添加style,js 匹配 img标签增加 style样式
给img标签增加 style样式: 1.如果img 标签没有style 就先添加style标签 2.添加标签后统一再添加style样式 function imgTagAddStyle (htmlstr ...
JS DOM获取标签/元素style样式
JS DOM获取标签/元素style样式文章目录 JS DOM获取标签/元素style样式 .style getComputedStyle() .style 只能获取行内样式,不能获取style标签 ...
使用JavaScript正则表达式解析markdown里的图片标签
需求:开发一个JavaScript函数,输入为markdown格式语法的图片标签: 输出是三个返回值: image31.png 31 https://upload-images.jianshu.io/ ...
VSCode代码自动补全（html标签、style样式、css属性及值）
转自:传送门 1.按CTRL+SHIFT+P 2.输入搜索Suggest:Snippets Prevent Quick Suggestions(控制在活动代码片段内是否禁用快速建议) 3.取消选中 4 ...
Javascript正则表达式表示固定开头和结尾的字符串
Javascript正则表达式表示固定开头和结尾的字符串举例:用Javascript正则表达式表示以"法宝联想"开头和"智能发现"结尾的字符串(包含开头和结尾 ...
javascript正则表达式截取字符串
一.javascript正则表达式的基本知识 1 javascript 正则对象创建和用法声明javascript 正则表达式 var reCat = new RegExp("cat&qu ...
经典JavaScript正则表达式实战
来源:http://www.cainiao8.com/web/js_note/js_regular_expression_blueidea.html 目录 1. 正则表达式实战...1 2. 匹 ...
玩转JavaScript正则表达式
Why Regular Expression 我们先来看看,我们干哈要学正则表达式这玩意儿: 复杂的字符串搜寻.替换工作,无法用简单的方式(类似借助标准库函数)达成. 能够帮助你进行各种字符串验证. ...
JavaScript正则表达式的学习
JavaScript正则表达式的学习 1. 正则表达式概述 1.1 什么是正则表达式正则表达式( Regular Expression )是用于匹配字符串中字符组合的模式.在 JavaScrip ...

JavaScript正则表达式给html字符串的img标签增加style样式

JavaScript正则表达式给html字符串的img标签增加style样式相关推荐

最新文章

热门文章