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

 更新时间:2020年04月01日 23:50:44   投稿:hebedich  
本文给大家讲解的是使用javascript实现去除多余的TABLE的样式,主要通过结合正则表达式来实现,非常的简单实用,有需要的小伙伴可以参考下。

项目中遇到这样的需求,一大段文章正文的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控制的,基本上不用这么多参数什么的了,除非特殊的表格

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

相关文章

  • 微信小程序vant弹窗组件的实现方式

    微信小程序vant弹窗组件的实现方式

    这篇文章主要介绍了小程序vant弹窗组件的实现方式,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • 详解GoJs节点的折叠展开实现

    详解GoJs节点的折叠展开实现

    这篇文章主要为大家介绍了GoJs节点的折叠展开实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 基于javascript实现九宫格大转盘效果

    基于javascript实现九宫格大转盘效果

    这篇文章主要为大家详细介绍了基于javascript实现九宫格大转盘效果的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • JavaScript接入百度地图API的方法步骤

    JavaScript接入百度地图API的方法步骤

    在网站开发过程中,经常会调用到地图,百度地图JavaScript API可帮助您在网站中构建功能丰富、交互性强的地图应用,本文就详细的介绍一下,感兴趣的可以了解一下
    2021-07-07
  • webpack动态加载与打包方式

    webpack动态加载与打包方式

    webpack有两种组织模块依赖的方式,同步和异步,这篇文章主要介绍了webpack动态加载与打包方式,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • JavaScript 全角转半角部分

    JavaScript 全角转半角部分

    JavaScript 全角转半角部分 ,需要的朋友可以参考下。
    2009-10-10
  • javascript写的一个模拟阅读小说的程序

    javascript写的一个模拟阅读小说的程序

    这篇文章主要介绍了用javascript写了一个模拟阅读小说的程序,需要的朋友可以参考下
    2014-04-04
  • 简单了解three.js 着色器材质

    简单了解three.js 着色器材质

    这篇文章主要介绍了three.js 着色器材质的相关资料,文中讲解非常详细,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-08-08
  • Bootstrap源码学习笔记之bootstrap进度条

    Bootstrap源码学习笔记之bootstrap进度条

    本文通过源码给大家解析bootstrap进度条样式,分为条纹进度条,动态条纹进度条,层叠进度条和带Label的进度条,下面通过代码给大家简单介绍下,感兴趣的朋友一起看看吧
    2016-12-12
  • JS实现QQ图片一闪一闪的效果小例子

    JS实现QQ图片一闪一闪的效果小例子

    这篇文章介绍了JS实现QQ图片一闪一闪的效果小例子,有需要的朋友可以参考一下
    2013-07-07

最新评论