一个网友问:

<p class="a" style="font-size: 12pt;  font-family: ""; color: red;">a</p>

如何替换成:

<p class="a" >a</p>

以为So easy,写个正则匹配一下就OK了,

/style="[^"]*?"/g

结果生成结果如下:

<p class="a" "; color: red;">a</p>

原来忽略了style="中间有双引号"

琢磨后,

改进了正则表达式:

var a=`<p class="a" style="font-size: 12pt;  font-family: ""; color: red;">a</p>`

var reg4 = /style="[^=]*?"([(\s+\w+=)|>])/g

a.replace(reg4,'$1')

最终生成结果:

<p class="a" >a</p>

"和>之间还多了一个空格。基本上达到了要求。

原理,style后的内容非贪婪匹配,以一个=号或是>号结尾,后面那部分要用分组($1)替换回来

20190107,反馈有问题,改进:

 var a=` <span style="font-family: "Times New Roman";" class="abc">`
var reg4 = /style="[^=>]*"([(\s+\w+=)|>])/g
a.replace(reg4,'$1') 

把非贪婪匹配改为了贪婪匹配。

正则替换HTML里的style属性的更多相关文章

  1. dede文章调用时过滤调 body里面的style属性和值

    dede 发布文章的时候会在里面的标签中添加一些style 属性,现在改网站想去掉这些属性和里面的值,因为文章太多所以就用下面的方法 \include\arc.listview.class.php 在 ...

  2. 在v-html中,js 正则表达式清除字符串里的style属性

    项目中遇到这样的需求,后端返回的是字符串,在vue用v-html显示,里面有style样式,要去除style 在v-html中使用filters,和平时的不一样,推荐项目的方法,定义一个全局的过滤方法 ...

  3. JavaScript之Style属性学习

    当CSS使用伪类开始侵入DOM和JavaSCript所控制着的行为层时,DOM和JavaScript也使用他们的一系列样式去控制表现层,这篇随笔主要说的就是利用JavaScript去控制元素的表现形式 ...

  4. CSS用HTML中的style属性替换

    废话不多说上代码: 1.用CSS给文字添加背景色: <html> <head> <style type="text/css"> body {ba ...

  5. php中的正则函数:正则匹配,正则替换,正则分割 所有的操作都不会影响原来的字符串.

    有一个长期的误解, 如果要分组, 必须用 小括号 和 |, 而不能用 中括号 和 |. [ab|AB]表示的不是 匹配 ab或 AB, 而是表示 匹配 a,b, |, A, B 这5个字符中 的任意 ...

  6. js外部样式和style属性的添加移除

    在页面中,往往一个控件的外部样式或者内部样式往往不只一个,而我们只需操作其中一个样式该怎么办呢? 最开始我也不知道该怎么做,就用了最原始的方法,替换原有的样式为新的样式,这样每次都要获取原样式,找通用 ...

  7. php中的正则函数主要有三个-正则匹配,正则替换

    php中变量的声明? 由于php声明变量的时候, 不支持使用 var关键字, 又不能直接写一个变量名字, 孤零零的放在那里, 所以, 在php中声明变量的方式, 同时也是给变量初始化的形式, 即: & ...

  8. PHP函数preg_replace() 正则替换所有符合条件的字符串

    PHP preg_replace() 正则替换,与JavaScript 正则替换不同,PHP preg_replace() 默认就是替换所有符号匹配条件的元素. preg_replace (正则表达式 ...

  9. css字体样式(Font Style),属性

    css字体样式(Font Style),属性   css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...

随机推荐

  1. sql在所有存储过程中查询包含某字符串的执行语句

    直接在查询分析器中执行以下代码就行: 方法一) select name from sysobjects o, syscomments s where o.id = s.id and text like ...

  2. 责任链模式(Chain of Responsibility)

    定义:为一个请求定义含有链状关系的接受对象,基于请求的类型,松耦合发送者和接受者之间的关系. 实现方式: 首先定义一个抽象类,包括一个公共抽象行为和决定子类链状关系的属性,然后创建一系列对象继承这个抽 ...

  3. Java语法基础学习DayTwentyOne(网络编程)

    一.IP地址和端口号 1.作用 通过IP地址,唯一的定位互联网上一台主机. 端口号标识正在计算机上运行的进程,不同进程有不同的端口号,被规定为一个16位的整数0~65535,其中0~1023被预先定义 ...

  4. 【原创】Arduino、arm、树莓派与单片机

    Arduino是一个由开源软件环境支持的开源硬件原型平台.包含硬件(各种型号Arduino板)和软件(Arduino IDE).集成开发环境是Arduino IDE ,编写和编译sketch后通过US ...

  5. CSS效果:不怎么样的登录表单

    HTML: <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

  6. 怎样检测TCP/UDP端口的连通性

    1 TCP端口的连通性 TC端口的连通性,一般通过telnet检测: TCP协议是面向连接的,可以直接通过telnet命令连接 telnet host-ip port 2 UDP端口的连通性 因为公司 ...

  7. 深度学习(PYTORCH)-2.python调用dlib提取人脸68个特征点

    在看官方教程时,无意中发现别人写的一个脚本,非常简洁. 官方教程地址:http://pytorch.org/tutorials/beginner/data_loading_tutorial.html# ...

  8. Vue2.x路由的步骤

    创建路由步骤: 1.引入vue-router库,可用最新版https://unpkg.com/vue-router 2.创建所需要的组件 3.创建router实例对象 4.在根实例中注册一下 => ...

  9. 周强 201771010141 《面向对象程序设计(java)》第九周实验总结

    实验部分 1.实验目的与要求 (1) 掌握java异常处理技术: (2) 了解断言的用法: (3) 了解日志的用途: (4) 掌握程序基础调试技巧: 2.实验内容和步骤 实验1:用命令行与IDE两种环 ...

  10. iOS和小米手机拍照上传后,在web端显示旋转

    ( ′◔ ‸◔`)现在的公司啊都流行混合开发,我们公司也不例外,非要把交互非常多的社区模块用内嵌web页展示,好吧好吧,毕竟有的应用也是这么做的,那既然是社区就肯定少不了用户上传图片的操作,在开发阶段 ...