urlloader加载的html/xml文本行距过高(清除空白符)

由于排版的问题,我们通过urlloader加载的html或xml标签之间都是有空白符的,比如:

<div>

<li>hello</li>

<li>word!</li>

</div>

上面这段文字,一共有4个换行符,2个缩进符,由于制作良好视觉的排版原因,我们在设计时不可能写成下面的格式:

<div><li>hello</li><li>word!</li></div>

上面这种格式对于计算机来说是良好的,但对于人类来说却造成了阅读困难,因此,现代的web浏览器很早就注意到了这种人类阅读需要的问题,不会把标签之间的换行看作是需要输出一行行空白,因此它会自动忽略这种换行,自觉翻译成上面这种正常排版。但as3在这方面明显还是欠缺,你写什么,它就原样输出什么,还是把\r\n\、、\n、\r、\0等这类符号看成需要输出换行或空白符。因此,你的第一种格式写法解析为:

.hello


.word!

从中可以看出,输出间的空格非常大,这是因为有系统换行\r\n加入的原因造成的。因此,我们必须手动消除这些空白符。好吧:

htmlText.split("\r\n").join('').split("\n").join.split("\r").join('').split("\0").join('');

处理之后,flash player排版明显向web浏览器靠拢了,好看了很多,行与行之间的空隙也没那么大了。但在不该有空隙的地方还是空出一大片,用trace查看一下原来:

<div> <li>hello</li> <li>word!</li> </div>

标签之间还是有缩进空白输出符的(有时我们会用几个空格代表不同层次的缩进),因此要消灭所有空白符,看来我们最好用正则表达式了:
htmlText.replace(/>\s{0,}([^<]{0,})\s{0,}</gm, ">$1<");
这样就把标签之间的所有空白符清除掉了。当然,这里面也有误杀的,比如我们需要:

<div><b>hello</b><b> word!</b></div>

这就把word!前面的空白给抹掉了。因此,你需要根据需求优化下表达式。

最后PS一下as3,它能支持的html标记非常少,而支持的css标记则更少,所以在使用TextField.htmlText与StyleSheet时不要想当然在html中的写法它都能接受。
posted @ 2014-03-05 20:56  sumsung753  阅读(253)  评论(0编辑  收藏  举报