技术宅：让网页可编辑 如何选择链接中的文本

　　[核心提示] 我不知道你是不是有这样的疑惑，在 Word 里，链接是通过按住 Ctrl 键打开的，而在浏览器中，只要点一下链接就会被打开。那么，如果想选择一个链接内的文本该如何操作?

　　你考虑过吗?

　　我不知道你是不是有这样的疑惑，在 Word 里，链接是通过按住 Ctrl 键打开的，而在浏览器中，只要点一下链接就会被打开。那么，如果想选择一个链接内的文本该如何操作?

　　比如上图中被框起来的“新闻”两个字，该怎样选中它?一般的答案，应该是先选择“百度新闻”或“新闻搜索”，然后复制粘贴到需要的地方，再来根据情况掐头去尾就行了。我相信这也是大部分人的做法。然而——

　　将就跟讲究，差得太多了。

　　参考答案

　　Vimperator 和 Vimium

　　这是两个功能相同的浏览器扩展，分别在 Firefox 和 Chrome 中使用。它们让浏览器操作变得像在 Vim 一样，具体功能可以搜索相关文章，我这里也没有必要多费口舌。具体操作方法是在使用这一扩展的时候，按键盘上的 C 进入光标模式，后面的操作就和在 VIM 里一样了，用方向键控制光标到希望的地方，然后按 V 开始选择，再然后按 V(对应 VIM)或 Ctrl 或 Command+C 来复制。

　　但是，这只是一个可行的方法，不是最好的方法，对于：

　　因不喜爱或不愿付出过量学习成本不愿使用它们的人;

　　没有类似扩展的浏览器。

　　有没有不用扩展就可以达到目标的方法呢?我们继续探索。

　　光标浏览

　　尽管 IE 一直口碑不好，但是其创新之处并不少。尼古拉斯·泽卡斯先生有一篇著名的文章《The innovations of Internet Explorer》(译文)，有兴趣可以看看。然而此君所述更多是在技术层面的创新，而没有提产品层面的创新。我无意在这里花篇幅补全“产品的创新”这一部分，只提这里用到的光标浏览。光标浏览(caret browsing)是 IE 8 中首创的功能，，可以通过 F7 键调出。官方的介绍如下：

　　这一功能后来被 Firefox 抄袭，甚至连快捷键也同样是 F7。

　　总之，按下之后，你点击网页中有文字的地方，会看到那里出现一个竖线光标，就像 Word 一样。除了计算机相关从业者和爱好者外，很少有人知道，在绝大多数有图形界面的操作系统中，可以通过按下 Shift 键移动光标或点击鼠标来选择文字。试着去问问你开小超市的姨父或正在初三冲刺中考的表妹，我相信他们肯定会一脸疑惑。而这一小技巧则是本方法的关键之一。那么接下来怎么做也就呼之欲出了：把光标定位到链接附近，然后按住 Shift 移动光标直到选择完，然后选中的文字就任你处置了。遗憾的是，现在的世界第二大浏览器 Chrome 尚不支持这一特性，总不能为了选个文字还要切换到 IE 吧!那么还有什么别的招呢?

　　让网页可编辑

　　在不久的几年前，Chrome 和 360 浏览器这两个如今的主流还尚未出世，Firefox 仅在极少小众中有着良好口碑，但统治天下的是一大波 IE 套壳浏览器。那时候，腾讯出的浏览器还不叫 QQ 浏览器，而是叫做“腾讯 TT”。

　　我至今仍觉得腾讯 TT 很不错，除了轻量的安装大小、清新简洁的外观、便捷够用的内置功能外，一个让我印象深刻的特点是它可以“剪切”网页中选中的文字，这一点让年轻的我震惊不已。在产品设计中的一个重要参考原则是给用户的任何操作以反馈，比如按钮按下的反馈、异步载入时等待返回请求的 Loading 提示。我很喜欢这种反馈，但是复制的时候却无法得到反馈。所以在我既可以剪切又可以复制的时候，我常常会选择剪切，原因是我能从中得到反馈：剪切的内容变没了。我多希望复制文字的时候也能得到一个反馈告诉我“文字已复制”，但是只有在很少数的情况才会遇到，真是“可遇而不可求”。

　　这和我们的问题有什么关系?言归正传，从“光标浏览”一节可以看出只要在浏览器中放置一个可移动的光标，那么选择就是很容易的事情了。在 Chrome 中，怎样做到，我想对熟悉 web 开发的读者看到本节标题心里就有谱了。是的，正是藉由 HTML5 种的这一个 contentEditable 属性，这一属性可以让腾讯 TT 中那一让我印象深刻的特性再现。顾名思义，这一属性用于控制网页的可编辑性。可以按尝试打开浏览器的控制台，入命令:

document.body.contentEditable = true;

　　再用鼠标点一下有字的地方，你会发现光标出现了!后面剩下的步骤，参考“光标浏览”的内容。只是，每次都需要这样的话，怎么也不够方便。那么自然而然会想到将其转制为一个 userscript 脚本，通过 Grease Monkey 或 Tampermonkey 等让它自动载入。

 // ==UserScript==// @name	editable// @namespace   editable// @description editable// @version	1// @author	 geekpark// @include	*// @grant	none// @run-at document-end// ==/UserScript==;(function() {	var bind = (document.addEventListener ? document.addEventListener : 
(document.attachEvent ? document.attachEvent : false));	if (bind) {		var body = document.body;		bind.call(document, 'dblclick', function() {			var editable = body.contentEditable;			body.contentEditable = !(editable === 'true' || editable === true);		});		bind.call(document, 'keydown', function(e) {			if (e.which === 27 || e.keyCode === 27) {				body.contentEditable = false;			}		});	}})();

　　可以将上面这个文件保存，用各种浏览器对应的方法安装为 userscript。其作用是双击就可以切换是否出现光标。

　　至此，我所知道的途径就介绍完了。