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

网络编程 2021-07-04 21:48www.168986.cn编程入门
本文给大家讲解的是使用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-: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-: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;
}

狼蚁SEO长沙网络推广再给大家推荐一个

//表格替换 
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控制的,基本上不用这么多参数什么的了,除非特殊的表格

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

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by