javascript中使用正則表達式清理table樣式的代碼

更新時間：2020年04月01日 23:50:44 投稿：hebedich

本文給大家講解的是使用javascript實現(xiàn)去除多余的TABLE的樣式，主要通過結(jié)合正則表達式來實現(xiàn)，非常的簡單實用，有需要的小伙伴可以參考下。

項目中遇到這樣的需求，一大段文章正文的html代碼在手機中顯示不全，原因是由于其它有table，而table表格中的tr/td都攜帶了從word中粘貼過來的樣式，需要將這一大段的字符串中的table、tr、td中攜帶的樣式清除掉，同時還不能破壞table結(jié)構(gòu)，即要保留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">經(jīng)辦人<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">是否有發(fā)票<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腳本如下：

/*
 *格式化內(nèi)容，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>");

這樣對于表格中所有出現(xiàn)的標簽都進行了替換，因為現(xiàn)在都是用css控制的，基本上不用這么多參數(shù)什么的了，除非特殊的表格

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: