如何使用JavaScript创建文本搜索书签
书签是可以作为浏览器书签访问的JavaScript应用程序 。 它们用于使用户能够在网页上执行不同的操作 。 例如, FontShop的此书签小册子用于预览任何网页上的FontShop网络字体。
在本文中,我们将通过创建一个对任何网页上的选定文本执行Wikiwand (看起来更好的Wikipedia) 搜索 的书签来构造书签的过程是多么快速和容易。
小书签的工作方式
小书签的URI 使用javascript:
协议指示它由JavaScript代码组成 。 单击书签时,可以在网页上运行JavaScript ,并执行任务,例如更改页面的外观,重定向到另一个页面或在其上显示新信息。
由于书签本质上是JavaScript代码集 ,因此很容易用很少JavaScript知识(无论是个人使用还是将其提供给您的用户)进行创建,例如WordPress的Press This书签。
开始使用JavaScript代码
Wikiwand用于英语文章的URL结构为https://www.wikiwand.com/en/articleTitle
。 我们需要编写一个脚本,该脚本跳到Wikiwand页面,该URL的URL 以用户刚刚选择的字符串结尾 -选定的文本将需要代替articleTitle
。
首先,我们使用以下代码来掌握用户在页面上选择的文本 :
getSelection().toString()
我们需要转换返回的对象getSelection()
通过使用作为字符串 toString()
方法,以使其输出选定的文本 。
接下来,我们需要访问 Wikiwand文章页面。 我们将使用以下逻辑来实现这一点,其中newURL
将是Wikiwand文章页面的URL (将在最后包含所选字符串):
location.href = newURL
当我们将这两个代码片段放在一起时,我们将得到以下脚本:
location.href='https://www.wikiwand.com/en/'+getSelection().toString()
现在,我们只需要在前面添加javascript:
协议,就可以在书签中使用最终代码 :
// 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')
用单个空格字符 ( %20
) 替换文本中的任何新行字符 ( \n
)。
JavaScript代码已准备就绪。 请注意,代码需要放在一行中且没有换行符 ,因为稍后它将被添加到文本输入字段中 。
创建书签
打开浏览器的书签窗口,然后添加一个新书签 :
- Firefox:按ctrl + shift + B / cmd + shift + B ,右键单击“书签工具栏”,然后选择“新建书签”。
- Chrome:按ctrl + shift + O / cmd + alt + B ,右键单击“书签栏”,然后选择“添加页面…”。
在URL字段中,从以前复制粘贴JavaScript代码 。 创建书签后即可使用。 转到任何网页,在Wikiwand中选择要搜索的单词 ,然后单击小书签 -Wikiwand文章页面将立即打开。
快速访问
您可以选择直接在浏览器中显示书签以进行快速访问,而不必每次需要书签时都进入书签菜单。
- Firefox:在顶部菜单栏中单击“查看>工具栏”,然后选择“书签工具栏”。
- Chrome:按ctrl + shift + B / cmd + shift + B。
创建一个书签链接
您也可以将书签作为超链接添加到网站,访问者可以通过将链接拖放到书签工具栏上,或者右键单击该链接并选择将其添加为书签的选项来添加书签。
要将您的小书签变成超链接,请创建一个<a>
HTML标签,并将小书签脚本作为其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>
如何分开存放小书签
您还可以使用一个单独JavaScript文件来存储小书签代码,如果您使用的是简短脚本(例如我们在本教程中刚刚看到的脚本),则可能不需要这样做,但是当JavaScript代码太长而无法使用时,可以派上用场。将其复制粘贴到浏览器的书签栏中。
文件myscript.js
将包含小书签的主要JavaScript代码 ,您需要将以下代码添加为书签URL (添加到浏览器的书签栏,或添加为HTML文件中href
属性的值):
// add in one line without line breaks
javascript:(()=>{with(document){let s=createElement('script');s.src='myscript.js';head.appendChild(s)}})();
上面的代码段包装在一个自动调用箭头函数中 ,并使用ECMAScript 6的功能(例如let
关键字)以减少代码长度。 当用户单击书签时 ,它将在文档的<head>
部分中添加一个指向myscript.js
文件的<script>
标记(请注意,对于myscript.js
文件,您可能需要使用绝对路径)。
在我以前的文章中,您可以阅读有关如何使用with
语句和自调用JavaScript函数的更多信息 。
翻译自: https://www.hongkiat.com/blog/make-bookmarklet-with-javascript/
如何使用JavaScript创建文本搜索书签相关推荐
- MongoDB之文本搜索
MongoDB之文本搜索 简介 文本搜索的作用,如果你是java工程师,那么应该知道apache全文搜索引擎Lucene框架以及Solr和Elastiscearch全文搜索引擎技术.MongoDB提供 ...
- Javascript 创建书签小工具 (bilibili视频下载为例)
书签小工具(Bookmarklets)是一个非常棒的javascript代码小片断伪装成的小应用,它驻留在你的浏览器里并为网页提供额外的功能.这里我们将研究如何从头开始创建一个书签小工具及一些最佳实践 ...
- html 必应网搜索,教程:创建自定义搜索网页 - 必应自定义搜索 - Azure Cognitive Services | Microsoft Docs...
您现在访问的是微软AZURE全球版技术文档网站,若需要访问由世纪互联运营的MICROSOFT AZURE中国区技术文档网站,请访问 https://docs.azure.cn. 教程:构建自定义搜索网 ...
- Linux学习命令汇总三——Linux用户组管理,文件权限管理,文本搜索命令grep及正则表达式...
本章Blog相关Linux知识点 解析:在数据库按搜索码查找相对应的条目,并找与之对应额外的其他数据库的过程:名称解析:UID ,组名解析:GID 数据库:文本文件,sql数据库,ldap数据库,用户 ...
- linux如何查看归档文件,linux基本命令:文本搜索,拷贝文件,移动文件,归档管理,压缩解压缩文件,查看命令位置...
1.文本搜索:grep grep查找的是文件内容中的文本,字符需要用引号括起来,单引双引都可以 格式:grep [-选项] '内容' 文件名 例如: -v显示不包含匹配文本的所有行(相当于求反) -n ...
- 10个免费的javascript富文本编辑器(jQuery and non-jQuery)
本文介绍了10个免费易用富文本编辑器(rich text editors,RTE),其中5个是Jquery插件,另外5个是非Jquery富文本编辑器 简介 Javascript富文本编辑器使我们添加. ...
- 数据库9:联结表 高级联结 组合查询 全文本搜索
第十五章联结表 Sql最强大的功能之一就是能在数据检索查询的执行中联结(join)表.联结是利用sql的select能执行的最重要的操作,能很好的理解联结及其语法是学习sql的一个极为重要的组成部分. ...
- 如何在Flutter(2021)中创建过滤器搜索列表视图
这篇文章是关于在 Flutter 中制作过滤/搜索 ListView.我们将快速浏览完成工作的方法,然后通过一个具体而完整的示例来应用该方法.不需要第三方软件包. 概述 我们将创建一个函数来过滤结果, ...
- android 富文本框架_五种JavaScript富文本编辑器,总有一款适合你
全文共2099字,预计学习时长4分钟 也许,你时常会遇到要开发基于Web的文本编辑器的情况.有时候,只需实现一个简约且轻量级的应用程序,不必有其他任何不必要的功能.而有时候,你的首要任务是保护用户的商 ...
最新文章
- VC++保存绘制的图形-1
- 多线程存数据mysql_java 多线程存储数据库
- 脑机接口与量子计算机,关于脑机接口---浅谈人工智能。
- 剑指0ffer04.二维数组中的查找
- LSMW one tip - 字段定义
- mysql存储引擎innodb_MySQL常用存储引擎之Innodb
- Linux 网络相关命令
- java中文分词算法_Java实现逆向最大匹配中文分词算法
- mybatisPlus代码自动生成
- 职称计算机ppt2003窍门,PowerPoint2003使用技巧集锦(4)
- DNS反劫持的几种方式
- Ubuntu 15.10 安装 Rabbitvcs
- 什么是自媒体、自媒体平台???
- CC2530 Hex文件解析
- 网页爬虫1--正则表达式
- 【基于微信的物品回收小程序的设计与实现】
- python控制示波器获取波形_三种方法教你用示波器快速捕获异常
- 微信新功能,拍一拍的背后,暗藏着商机
- android 输入法全屏,android 输入法不全屏
- 诺奖罗杰.彭罗斯的量子意识及其他(含朱清时-科学与佛学 77分钟视频)