HTML清洁化

网站添加文章基本都是由Markdown写成的,但是由于网站针对内容的排版有专门的定制,而markdown转换以后的html中有很多我不需要的东西,因此就需要将这部分不需要的东西清理掉。

不需要的html元素

  • 去除头尾的 artile 标签
  • a链接元素
  • 元素的Class、ID、Title等属性

正则替换



# 替换所有 a 链接标签 正则 <a\s.*?</a> # 替换所有ID / Class / Title属性 \s{0,1}(class|id|title)=".*?"

关于table 表格 转 html代码清洁化的问题

很多具有标准化产品的公司,产品信息很多时候都是存储在MS Excel表格之中,而当这些公司需要建站时,就需要将这些Excel的产品信息转化为单个网页页面放到网站上。很多人Dirty的做法是将Excel表格打开,然后将数据表格截图,以图片的方式上传到网站上。是的,很省事,但是搜索引擎是无法直接快速而准确的识别图片的内容的,对营销推广的工作不利。再者,如果客户对你的产品感兴趣,就不的不去手动打出来你产品的某个型号参数等信息,这样也给客户增加了麻烦。所以将MS Excel转HTML代码是必须要做的工作,不可图懒省事。那么问题来了,怎么做这件事?

其实转出来的最好结果是干干净净的HTML,只含有我们需要 table元素的基本标签比如table、thead、tbody、tr、td和包括colspan等基本属性的代码。至于class、id、fonts以及设计表格样式的inline css style完全是多余的,因为这些东西在我们设计网站的时候,已经预定义了。

比较简单的table我们可以用markdown来直接写,就是使用Dreamweaver或是其他可视化的HTML表格编辑工具来手动的敲一个个表格,但是如果一个表格几百行,这种效率显然是无法接受的。网上有很多EXCEL转HTML的网页工具,很多我都已经试过了,都存在各种各样的问题,比如转码之后表格布局改变了,或是误删除了空格表单。或是删不干净,最终还是留下我们很多代码中的脏东西。那么是不是还有其他方法,可以快速而高效的转换把MS EXCEL转 清洁的HTML?

答案是有的。大致的步骤:MS EXCEl 转存 htm格式,然后对 生成的代码进行替换。

这样做当然是有问题的,如果这样直接就能干,我就没有必要写下面的东西了。因为MS生成的htm格式文件的代码实在是太TM脏了,原谅我粗口,我是真的生气。MS不光加了一堆无用的格式信息,还添加了很多自定义的标签和属性,这真的是视W3C的标准不存在,对于这种没有节操又任性的公司,直接放弃,转向另外一种方式。既然魏然不支持W3C标准,那么我们就找支持W3C标准的办公软件,尤其是有表格SpreadSheet功能Office软件。你脑袋一亮,对确实有一家这样的公司,他就是Apache基金会,他除了有Apache这样享誉全球的服务器软件,还有大数据处理的系统工具Spark,当然还有我们今天的主角 Apache OpenOffice。Apache基金会维护了350+大型而健壮的软件项目,而且这一数量还在不断上升,而这些大型的软件绝大部分都是开源的,意味着他们都是免费的。So BIG DISS to MS.

以下是OpenOffice下的调整好的表格基本样式。

OpenOffice表格

直接将编辑好的表格另存为html,然后你就会惊喜的发现生成的代码非常规范和美观。

完全没有乱七八糟的东西,我们只需要删除代码中的frame、rule、border、fonts 信息就可以直接Copy到网站上了。

当然如果你对字体这块没要求的话,不删除就可以直接放到网站上。

# 正则替换 table 标签多余元素
\s{0,1}(frame|rules|border)=".*?"

# 正则替换字体信息
<font.*?>|</font>

最终的结果就是这样

完美撒花。

@TODO 后期考虑专门针对这种情况做一个小软件