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 相关文章推荐
获取当前网页document.url location.href区别总结
May 10 Javascript
javascript新手语法小结
Jun 15 Javascript
JavaScript 输入框内容格式验证代码
Feb 11 Javascript
下拉列表select 由左边框移动到右边示例
Dec 04 Javascript
javascript实现的一个带下拉框功能的文本框
May 08 Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 Javascript
JS常见算法详解
Feb 28 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
js异步编程小技巧详解
Aug 14 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
简单了解JavaScript arguement原理及作用
May 28 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读取html并截取字符串的简单代码
2009/11/30 PHP
PHP中函数rand和mt_rand的区别比较
2012/12/26 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
看了就知道什么是JSON
2007/12/09 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
JavaScript 数组详解
2013/10/10 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
简单介绍Python中的struct模块
2015/04/28 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
win10安装tensorflow-gpu1.8.0详细完整步骤
2020/01/20 Python
Python中and和or如何使用
2020/05/28 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
德国电子商城:ComputerUniverse
2017/04/21 全球购物
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
C#中的验证控件有几种
2014/03/08 面试题
力学专业求职信
2014/07/23 职场文书
初三毕业评语
2014/12/26 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
教师师德工作总结2015
2015/07/22 职场文书
2016春节放假通知范文
2015/08/18 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript