Chrome 中印象笔记悦读插件的问题

印象笔记有一个 Chrome 插件,叫做悦读,可以过滤页面上的杂乱元素,得到一个清爽的纯内容视图,并且可以剪辑到印象笔记中,是个很好的插件。

然而有一个问题,例如这个页面,http://www.techxue.com/techxue…,摘取一段话

微信由腾讯公司于2011年1月推出,到2013年第4季度,注册用户量已经突破6亿,月活跃用户数达到3.55亿,是亚洲地区拥有最大用户群体的移动即时通讯软件。它先后实现了公众平台、朋友圈、消息推送、钱包等功能。现在的微信拥有巨大的话语权,近期它与支付宝的对决,更是霸气侧漏。那么,这么高逼格的平台是如何横空出世的呢。请往下看。

这段话在阅读器视图中变成了

微信由腾讯公司于月推出,到季度,注册用户量已经突破亿,月活跃用户数达到亿,是亚洲地区拥有最大用户群体的移动即时通讯软件。它先后实现了公众平台、朋友圈、消息推送、钱包等功能。现在的微信拥有巨大的话语权,近期它与支付宝的对决,更是霸气侧漏。那么,这么高逼格的平台是如何横空出世的呢。请往下看。

很明显,数字都不见了,看了一眼源代码,究其原因,是因为代码的 span 标签有 lang 属性

<font size="3">
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">微信由腾讯公司于</span>
	<span lang="EN-US" style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">2011</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">年</span>
	<span lang="EN-US" style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">1</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">月推出,到</span>
	<span lang="EN-US" style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">2013</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">年第</span>
	<span lang="EN-US" style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">4</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">
		季度,注册
		<a href="http://techxue.com/yonghu/" target="_blank" class="relatedlink">用户</a>量已经突破
	</span>
	<span lang="EN-US" style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">6</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">亿,月活跃用户数达到</span>
	<span lang="EN-US" style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">3.55</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">
		亿,是亚洲地区拥有最大用户群体的移动即时通讯软件。它先后实现了公众平台、朋友圈、消息推送、钱包等功能。现在的微信拥有巨大的话语权,近期它与
		<a href="http://www.techxue.com/dutu/zhifu/" target="_blank" class="relatedlink">支付</a>宝的对决,更是霸气侧漏。那么,这么高逼格的平台是如何横空出世的呢。请往下看。
	</span>
</font>

我猜这是某个富文本编辑工具加上的,那么自然想到,如果把这些差异抹平,是不是问题就可以解决,怎么去掉呢,jQuery 自然就是一个办法,那么首先的问题就是怎么引入 jQuery,这里说了,http://stackoverflow.com/quest…

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
// ... give time for script to load, then type.
jQuery.noConflict();

然后去掉 span 的 lang 其实就是一行代码的事情

$("span[lang]").removeAttr("lang")

完成之后的效果就是

<font size="3">
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">微信由腾讯公司于</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">2011</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">年</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">1</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">月推出,到</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">2013</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">年第</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">4</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">
		季度,注册
		<a href="http://techxue.com/yonghu/" target="_blank" class="relatedlink">用户</a>量已经突破
	</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">6</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">亿,月活跃用户数达到</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">3.55</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">
		亿,是亚洲地区拥有最大用户群体的移动即时通讯软件。它先后实现了公众平台、朋友圈、消息推送、钱包等功能。现在的微信拥有巨大的话语权,近期它与
		<a href="http://www.techxue.com/dutu/zhifu/" target="_blank" class="relatedlink">支付</a>宝的对决,更是霸气侧漏。那么,这么高逼格的平台是如何横空出世的呢。请往下看。
	</span>
</font>

本来一心以为这样就搞掂了,但是一启动阅读器视图,还是那个鸟样,看来还是有什么地方没有搞好,后续继续折腾。

Leave a Reply

Your email address will not be published. Required fields are marked *