使用mark.js標(biāo)注網(wǎng)頁(yè)內(nèi)容

本文教你如何在chrome控制臺(tái)中,使用mark.js,隨意標(biāo)注任何網(wǎng)頁(yè)中的任何內(nèi)容。

首先,我們下載mark.js源碼:https://cdn.jsdelivr.net/mark.js/latest/mark.js.zip,并解壓:

打開(kāi)mark.min.js,看到一行壓縮后的源碼:

拷貝此行源碼,接下來(lái)我們打開(kāi)一張網(wǎng)頁(yè),這里以我的一篇簡(jiǎn)書文章頁(yè)為例子,chrome打開(kāi)http://www.itdecent.cn/p/283b46e660c2。

接下來(lái)我們打開(kāi)控制臺(tái):在Mac下,按下option + command + i;在Windows下,按下control + shift + i

控制臺(tái)中,輸入剛才拷貝的源碼,并按下enter鍵:

如此,一個(gè)Mark的全局構(gòu)造函數(shù)已初始化完畢。接下來(lái),我們選取我們想要的DOM元素,對(duì)它進(jìn)行標(biāo)注:

我們發(fā)現(xiàn)這塊區(qū)域就是classshow-contentdiv元素,于是使用如下方式把這個(gè)元素獲取,在控制臺(tái)中輸入:

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

然后使用mark.jsAPI對(duì)這個(gè)元素進(jìn)行標(biāo)注,在控制臺(tái)中輸入:

var instance = new Mark(contentEl);

instance.mark('Nicolas1.1');

成功!我們發(fā)現(xiàn)帶有nicolas1.1的字樣都被標(biāo)注上了背景色。

更多mark.jsAPI文檔,請(qǐng)參考https://markjs.io/。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,893評(píng)論 25 709
  • WebSocket-Swift Starscream的使用 WebSocket 是 HTML5 一種新的協(xié)議。它實(shí)...
    香橙柚子閱讀 24,725評(píng)論 8 183
  • 有話說(shuō)“為母則剛”,可是母親也不是上帝,仍舊有很多缺點(diǎn),甚至有你自己尚未發(fā)現(xiàn)的丑陋之處。 家有小女四個(gè)半月,大多時(shí)...
    Maria4918閱讀 240評(píng)論 0 0
  • 當(dāng)找到一個(gè)地方發(fā)泄時(shí),人才不會(huì)無(wú)聊,說(shuō)白了就是心理寄托,每個(gè)人都有自己發(fā)泄的方式。 你發(fā)泄的地方對(duì)你有無(wú)益處,是否...
    賽腦閱讀 574評(píng)論 0 0
  • 事件:群里同修說(shuō):沒(méi)有錢了問(wèn)老公要?。∥腋惺艿搅吮瘋?,我一直告訴自己老公身體不好,然后強(qiáng)迫自己賺錢養(yǎng)家,可是我又非...
    竺子閱讀 217評(píng)論 0 0

友情鏈接更多精彩內(nèi)容