javascript中使用正则表达式清理table样式的代码


Posted in Javascript onApril 01, 2020

项目中遇到这样的需求,一大段文章正文的html代码在手机中显示不全,原因是由于其它有table,而table表格中的tr/td都携带了从word中粘贴过来的样式,需要将这一大段的字符串中的table、tr、td中携带的样式清除掉,同时还不能破坏table结构,即要保留tr中的rowspan和td中的colspan属性。

html部分代码如下:

<p class="MsoNormal" align="left" style="text-align:left"><span lang="EN-US">
 <o:p>文字中华人民共和国文字中华人民共和国文字中华人民共和国</o:p>
 </span></p>
<table>
 <tbody>
 <tr style="height:13.5pt">
 <td width="117" style="width:88.0pt;border:solid windowtext 1.0pt;padding:0cm 5.4pt 0cm 5.4pt;height:13.5pt"><p class="MsoNormal" align="center" style="text-align:center"><span style="font-family:宋体;color:#1F497D">项目<span lang="EN-US">
  <o:p></o:p>
  </span></span></p></td>
 <td width="137" style="width:103.0pt;border:solid windowtext 1.0pt;border-left:none;padding:0cm 5.4pt 0cm 5.4pt;height:13.5pt"><p class="MsoNormal" align="center" style="text-align:center"><span style="font-family:宋体;color:#1F497D">金额<span lang="EN-US">
  <o:p></o:p>
  </span></span></p></td>
 <td width="153" style="width:115.0pt;border:solid windowtext 1.0pt;border-left:none;padding:0cm 5.4pt 0cm 5.4pt;height:13.5pt"><p class="MsoNormal" align="center" style="text-align:center"><span style="font-family:宋体;color:#1F497D">经办人<span lang="EN-US">
  <o:p></o:p>
  </span></span></p></td>
 <td width="135" style="width:101.0pt;border:solid windowtext 1.0pt;border-left:none;padding:0cm 5.4pt 0cm 5.4pt;height:13.5pt"><p class="MsoNormal" align="center" style="text-align:center"><span style="font-family:宋体;color:#1F497D">是否有发票<span lang="EN-US">
  <o:p></o:p>
  </span></span></p></td>
 </tr>
 <tr style="height:13.5pt">
 <td width="117" style="width:88.0pt;border:solid windowtext 1.0pt;border-top:none;padding:0cm 5.4pt 0cm 5.4pt;height:13.5pt"><p class="MsoNormal" align="center" style="text-align:center"><span style="font-family:宋体;color:#1F497D">合计<span lang="EN-US">
  <o:p></o:p>
  </span></span></p></td>
 <td colspan="3" valign="bottom" nowrap="" style="width:103.0pt;border-top:none;border-left:none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;padding:0cm 5.4pt 0cm 5.4pt;height:13.5pt"><p class="MsoNormal" align="center" style="text-align:center"><span lang="EN-US" style="font-size:11.0pt;font-family:宋体;color:black">
  <o:p></o:p>
  </span></p></td>
 </tr>
 </tbody>
</table>
<p class="MsoNormal"><span style="font-family:宋体;color:#1F497D">文字中华人民共和国文字中华人民共和国文字中华人民共和国。</span><span lang="EN-US" style="color:#1F497D">
 <o:p></o:p>
 </span></p>

JS脚本如下:

/*
 *格式化内容,str即是html格式的字符串
 */
function formatContent(str){
 str=str.replace(/<\/?(html|head|title|meta|body)\b[^>]*>/ig,"");
 str=str.replace(/<table[^>]*>/ig,"<table>");
 return str;
 str=str.replace(/(<tr[^>]*>)/ig, function (a, b) {
 if(a.indexOf('rowspan')>-1){
  a=a.replace(/([a-z]+)="([^"]+)?"/ig,function(c,d,e){
  return d === 'rowspan' ? (d + '="' + e + '"') : '';
  })
  return a;
 }else{
  return '<tr>';
 }
 });
 str=str.replace(/(<td[^>]*>)/ig, function (a, b) {
 if(a.indexOf('colspan')>-1){
  a=a.replace(/([a-z]+)="([^"]+)?"/ig,function(c,d,e){
  return d === 'colspan' ? (d + '="' + e + '"') : '';
  })
  return a;
 }else{
  return '<td>';
 }
 });
 return str;
}

三水点靠木小编再给大家推荐一个

//表格替换 
str=str.replace(/<table[^<>]*>/ig, "<table>");
str=str.replace(/<thead[^<>]*>/ig, "<thead>");
str=str.replace(/<tbody[^<>]*>/ig, "<tbody>");
str=str.replace(/<tfoot[^<>]*>/ig, "<tfoot>");
str=str.replace(/<tr[^<>]*>/ig, "<tr>");
str=str.replace(/<th [^<>]*>/ig, "<th>");
str=str.replace(/<td[^<>]*>/ig, "<td>");
str=str.replace(/<th>\s*?<p>/ig, "<th>");
str=str.replace(/<\/p>\s*?<\/th>/ig, "</th>");
str=str.replace(/<td[^<>]*>\s*?<p>/ig, "<td>");
str=str.replace(/<td>\s*?<p>/ig, "<td>");
str=str.replace(/<\/p>\s*?<\/td>/ig, "</td>");

这样对于表格中所有出现的标签都进行了替换,因为现在都是用css控制的,基本上不用这么多参数什么的了,除非特殊的表格

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 Javascript
js函数调用常用方法详解
Dec 03 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 Javascript
浅谈类似于(function(){}).call()的js语句
Mar 30 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
Angular表单验证实例详解
Oct 20 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
vue-cli初始化项目中使用less的方法
Aug 09 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
详解JavaScript 为什么要有 Symbol 类型?
Apr 03 Javascript
JavaScript实现网页跨年倒计时
Dec 02 Javascript
jquery实现图片上传之前预览的方法
Jul 11 #Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 #Javascript
javascript中JSON对象与JSON字符串相互转换实例
Jul 11 #Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 #Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 #Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 #Javascript
JavaScript模板引擎用法实例
Jul 10 #Javascript
You might like
php 无限分类的树类代码
2009/12/03 PHP
php继承的一个应用
2011/09/06 PHP
php 判断数组是几维数组
2013/03/20 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
phalcon框架使用指南
2016/02/23 PHP
强制设为首页代码
2006/06/19 Javascript
用js+xml自动生成表格的东西
2006/12/21 Javascript
使用js解决由border属性引起的div宽度问题
2013/11/26 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
javascript网页随机点名实现过程解析
2019/10/15 Javascript
vue2路由基本用法实例分析
2020/03/06 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
在Python中使用__slots__方法的详细教程
2015/04/28 Python
Python实现的最近最少使用算法
2015/07/10 Python
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
Python 3中print函数的使用方法总结
2017/08/08 Python
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
python 列表推导式使用详解
2019/08/29 Python
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
JNI的定义
2012/11/25 面试题
医学院护理专业应届生求职信
2013/11/12 职场文书
小学毕业家长寄语
2014/01/19 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
先进教师个人总结
2015/02/11 职场文书
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers
python实现学员管理系统(面向对象版)
2022/06/05 Python