使用mark.js标注网页内容

本文教你如何在chrome控制台中,使用mark.js,随意标注任何网页中的任何内容。

首先,我们下载mark.js源码:https://cdn.jsdelivr.net/mark.js/latest/mark.js.zip,并解压:

打开mark.min.js,看到一行压缩后的源码:

拷贝此行源码,接下来我们打开一张网页,这里以我的一篇简书文章页为例子,chrome打开http://www.jianshu.com/p/283b46e660c2

接下来我们打开控制台:在Mac下,按下option + command + i;在Windows下,按下control + shift + i

控制台中,输入刚才拷贝的源码,并按下enter键:

如此,一个Mark的全局构造函数已初始化完毕。接下来,我们选取我们想要的DOM元素,对它进行标注:

我们发现这块区域就是classshow-contentdiv元素,于是使用如下方式把这个元素获取,在控制台中输入:

var contentEl = document.querySelector('.show-content');

然后使用mark.jsAPI对这个元素进行标注,在控制台中输入:

var instance = new Mark(contentEl);

instance.mark('Nicolas1.1');

成功!我们发现带有nicolas1.1的字样都被标注上了背景色。

更多mark.jsAPI文档,请参考https://markjs.io/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,237评论 25 708
  • WebSocket-Swift Starscream的使用 WebSocket 是 HTML5 一种新的协议。它实...
    香橙柚子阅读 24,099评论 8 183
  • 有话说“为母则刚”,可是母亲也不是上帝,仍旧有很多缺点,甚至有你自己尚未发现的丑陋之处。 家有小女四个半月,大多时...
    Maria4918阅读 184评论 0 0
  • 当找到一个地方发泄时,人才不会无聊,说白了就是心理寄托,每个人都有自己发泄的方式。 你发泄的地方对你有无益处,是否...
    赛脑阅读 535评论 0 0
  • 事件:群里同修说:没有钱了问老公要啊!我感受到了悲伤,我一直告诉自己老公身体不好,然后强迫自己赚钱养家,可是我又非...
    竺子阅读 195评论 0 0