javascript清理table样式

前端技术 2023/09/04 JavaScript

项目中遇到这样的需求，一大段文章正文的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;
}

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

本文地址：https://www.stayed.cn/item/10726

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案