javascript格式化table标签内容
摘要：项目中遇到这样的需求，一大段文章正文的html代码在手机中显示不全，原因是由于其它有table，而table表格中的tr/td都携带了从word中粘贴过来的样式，需要将这一大段的字符串中的table、tr、td中携带的样式清除掉，同时还不能破坏table结构，即要保留tr中的rowspan和td中....
项目中遇到这样的需求，一大段文章正文的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 >
< 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;
}
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;
}
相关文章
最新发布
阅读排行
热门文章
猜你喜欢