javascript
如何使用JavaScript创建文本搜索书签
書(shū)簽是可以作為瀏覽器書(shū)簽訪問(wèn)的JavaScript應(yīng)用程序 。 它們用于使用戶能夠在網(wǎng)頁(yè)上執(zhí)行不同的操作 。 例如， FontShop的此書(shū)簽小冊(cè)子用于預(yù)覽任何網(wǎng)頁(yè)上的FontShop網(wǎng)絡(luò)字體。
在本文中，我們將通過(guò)創(chuàng)建一個(gè)對(duì)任何網(wǎng)頁(yè)上的選定文本執(zhí)行Wikiwand （看起來(lái)更好的Wikipedia） 搜索 的書(shū)簽來(lái)構(gòu)造書(shū)簽的過(guò)程是多么快速和容易。
小書(shū)簽的工作方式
小書(shū)簽的URI 使用javascript:協(xié)議指示它由JavaScript代碼組成 。 單擊書(shū)簽時(shí)，可以在網(wǎng)頁(yè)上運(yùn)行JavaScript ，并執(zhí)行任務(wù)，例如更改頁(yè)面的外觀，重定向到另一個(gè)頁(yè)面或在其上顯示新信息。
由于書(shū)簽本質(zhì)上是JavaScript代碼集 ，因此很容易用很少JavaScript知識(shí)（無(wú)論是個(gè)人使用還是將其提供給您的用戶）進(jìn)行創(chuàng)建，例如WordPress的Press This書(shū)簽。
開(kāi)始使用JavaScript代碼
Wikiwand用于英語(yǔ)文章的URL結(jié)構(gòu)為https://www.wikiwand.com/en/articleTitle 。 我們需要編寫(xiě)一個(gè)腳本，該腳本跳到Wikiwand頁(yè)面，該URL的URL 以用戶剛剛選擇的字符串結(jié)尾 -選定的文本將需要代替articleTitle 。
首先，我們使用以下代碼來(lái)掌握用戶在頁(yè)面上選擇的文本 ：
getSelection().toString()我們需要轉(zhuǎn)換返回的對(duì)象getSelection()通過(guò)使用作為字符串 toString()方法，以使其輸出選定的文本 。
接下來(lái)，我們需要訪問(wèn) Wikiwand文章頁(yè)面。 我們將使用以下邏輯來(lái)實(shí)現(xiàn)這一點(diǎn)，其中newURL將是Wikiwand文章頁(yè)面的URL （將在最后包含所選字符串）：
location.href = newURL當(dāng)我們將這兩個(gè)代碼片段放在一起時(shí)，我們將得到以下腳本：
location.href='https://www.wikiwand.com/en/'+getSelection().toString()現(xiàn)在，我們只需要在前面添加javascript:協(xié)議，就可以在書(shū)簽中使用最終代碼 ：
// add in one line without line breaks javascript:location.href='https://www.wikiwand.com/en/'+getSelection().toString().replace(/\n/g,'%20')最后的可選replace(/\n/g,'%20') 用單個(gè)空格字符 （ %20 ） 替換文本中的任何新行字符 （ \n ）。
JavaScript代碼已準(zhǔn)備就緒。 請(qǐng)注意，代碼需要放在一行中且沒(méi)有換行符 ，因?yàn)樯院笏鼘⒈?strong>添加到文本輸入字段中 。
創(chuàng)建書(shū)簽
打開(kāi)瀏覽器的書(shū)簽窗口，然后添加一個(gè)新書(shū)簽 ：
- Firefox：按ctrl + shift + B / cmd + shift + B ，右鍵單擊“書(shū)簽工具欄”，然后選擇“新建書(shū)簽”。
- Chrome：按ctrl + shift + O / cmd + alt + B ，右鍵單擊“書(shū)簽欄”，然后選擇“添加頁(yè)面…”。
在URL字段中，從以前復(fù)制粘貼JavaScript代碼 。 創(chuàng)建書(shū)簽后即可使用。 轉(zhuǎn)到任何網(wǎng)頁(yè)，在Wikiwand中選擇要搜索的單詞 ，然后單擊小書(shū)簽 -Wikiwand文章頁(yè)面將立即打開(kāi)。
快速訪問(wèn)
您可以選擇直接在瀏覽器中顯示書(shū)簽以進(jìn)行快速訪問(wèn)，而不必每次需要書(shū)簽時(shí)都進(jìn)入書(shū)簽菜單。
- Firefox：在頂部菜單欄中單擊“查看>工具欄”，然后選擇“書(shū)簽工具欄”。
- Chrome：按ctrl + shift + B / cmd + shift + B。
創(chuàng)建一個(gè)書(shū)簽鏈接
您也可以將書(shū)簽作為超鏈接添加到網(wǎng)站，訪問(wèn)者可以通過(guò)將鏈接拖放到書(shū)簽工具欄上，或者右鍵單擊該鏈接并選擇將其添加為書(shū)簽的選項(xiàng)來(lái)添加書(shū)簽。
要將您的小書(shū)簽變成超鏈接，請(qǐng)創(chuàng)建一個(gè)<a> HTML標(biāo)簽，并將小書(shū)簽?zāi)_本作為其href屬性的值 ：
<!-- add in one line without line breaks --> <a href="javascript:location.href='https://www.wikiwand.com/en/'+getSelection().toString().replace(/\n/g,'%20')">Wikiwand Search Bookmarklet </a>如何分開(kāi)存放小書(shū)簽
您還可以使用一個(gè)單獨(dú)JavaScript文件來(lái)存儲(chǔ)小書(shū)簽代碼，如果您使用的是簡(jiǎn)短腳本（例如我們?cè)诒窘坛讨袆倓偪吹降哪_本），則可能不需要這樣做，但是當(dāng)JavaScript代碼太長(zhǎng)而無(wú)法使用時(shí)，可以派上用場(chǎng)。將其復(fù)制粘貼到瀏覽器的書(shū)簽欄中。
文件myscript.js將包含小書(shū)簽的主要JavaScript代碼 ，您需要將以下代碼添加為書(shū)簽URL （添加到瀏覽器的書(shū)簽欄，或添加為HTML文件中href屬性的值）：
// add in one line without line breaks javascript:(()=>{with(document){let s=createElement('script');s.src='myscript.js';head.appendChild(s)}})();上面的代碼段包裝在一個(gè)自動(dòng)調(diào)用箭頭函數(shù)中 ，并使用ECMAScript 6的功能（例如let關(guān)鍵字）以減少代碼長(zhǎng)度。 當(dāng)用戶單擊書(shū)簽時(shí) ，它將在文檔的<head>部分中添加一個(gè)指向myscript.js文件的<script>標(biāo)記（請(qǐng)注意，對(duì)于myscript.js文件，您可能需要使用絕對(duì)路徑）。
在我以前的文章中，您可以閱讀有關(guān)如何使用with語(yǔ)句和自調(diào)用JavaScript函數(shù)的更多信息 。
翻譯自: https://www.hongkiat.com/blog/make-bookmarklet-with-javascript/
總結(jié)
以上是生活随笔為你收集整理的如何使用JavaScript创建文本搜索书签的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 第二周 体验复杂度--汉诺塔
- 下一篇： 【Springboot学习】Spring