JavaScript清理Word粘贴表格样式的正则表达式方案

问题背景与需求分析

在开发过程中，常遇到从Word复制的大段HTML内容在手机端显示异常的问题。这通常是因为表格元素（table、tr、td）保留了Word粘贴时产生的大量内联样式。为解决此问题，需要编写脚本清除这些冗余样式，同时必须确保不破坏表格原有的结构，特别是保留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>

对应的JavaScript处理脚本如下所示：

/*
 *格式化内容，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清理表格样式的完整介绍，希望这些代码示例能对读者有所帮助。