本文教你如何在chrome
控制臺(tái)中物遇,使用mark.js,隨意標(biāo)注任何網(wǎng)頁中的任何內(nèi)容脊奋。
首先芜抒,我們下載mark.js
源碼:https://cdn.jsdelivr.net/mark.js/latest/mark.js.zip漾峡,并解壓:
打開mark.min.js
竹握,看到一行壓縮后的源碼:
拷貝此行源碼葱淳,接下來我們打開一張網(wǎng)頁,這里以我的一篇簡(jiǎn)書文章頁為例子谦铃,在chrome
中打開http://www.reibang.com/p/283b46e660c2耘成。
接下來我們打開控制臺(tái):在Mac
下,按下option + command + i
驹闰;在Windows
下瘪菌,按下control + shift + i
:
在控制臺(tái)中,輸入剛才拷貝的源碼嘹朗,并按下enter
鍵:
如此师妙,一個(gè)Mark
的全局構(gòu)造函數(shù)已初始化完畢。接下來屹培,我們選取我們想要的DOM元素
默穴,對(duì)它進(jìn)行標(biāo)注:
我們發(fā)現(xiàn)這塊區(qū)域就是class
為show-content
的div元素
,于是使用如下方式把這個(gè)元素獲取褪秀,在控制臺(tái)中輸入:
var contentEl = document.querySelector('.show-content');
然后使用mark.js
的API對(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.js
的API
文檔若专,請(qǐng)參考https://markjs.io/。