技术宅:如何选择链接中的文本

技术宅:如何选择链接中的文本

你考虑过吗?

我不知道你是不是有这样的疑惑,在 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。其作用是双击就可以切换是否出现光标。

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

技术攻略
下载极客公园客户端
iOS下载
反馈