什么网站可以做装修效果图的,做网站怎么去找客户,沧州市,网站开发 问题 关键技术网页中内容比较多的话#xff0c;有时候需要通过搜索快速查找特定的文本。当然#xff0c;这可以通过浏览器的搜索功能实现#xff0c;但是#xff0c;象Anki的复习界面这样的场景#xff0c;并没有搜索功能#xff0c;我们就需要自己在网页上提供一个搜索框来实现。
下…网页中内容比较多的话有时候需要通过搜索快速查找特定的文本。当然这可以通过浏览器的搜索功能实现但是象Anki的复习界面这样的场景并没有搜索功能我们就需要自己在网页上提供一个搜索框来实现。
下面先用原生JavaScript实现一个。基本思路是用户在input中输入文字后在页面上进行查找找到匹配的内容就用一个class属性为包含高亮格式的css类名的span标签包裹起来。代码如下
!DOCTYPE html
html langzh
headmeta charsetutf-8title原生js搜索并高亮文本/titlestyle/* 用于高亮显示的css类 */.highlight {background-color: yellow;font-weight: bold;}/style
/head
body
div stylewidth:30%;text-indent: 2em;color:red;这个搜索用的是在innerHTML中搜索文本因此如果文本中包含html标签会导致搜索失败。在innerText中搜索文本可以排除html标签的影响但高亮后可能破坏原有的文档标签结构。/divpre下面的代码显示两行文本参见灰色底纹处lt;div classcontentgt;lt;pgt;我爱北京lt;spangt;天安lt;igt;门lt;/igt;lt;/spangt;lt;/pgt;天安门上太阳升lt;/divgt;/prediv classcontent stylebackground-color: #ccc;width:20%;p我爱北京span天安i门/i/span/p天安门上太阳升/divinput typetext idsearchInput placeholder输入搜索文本... oninputhighlightText()/scriptfunction highlightText() {const searchInput document.getElementById(searchInput);const searchValue searchInput.value.trim();const contentElement document.querySelector(.content);const content contentElement.innerHTML;if (searchValue ! ) {//先清除原有的高亮即将用于高亮的span标签删除但保留原有内容let highlightedContent content.replace(new RegExp(span classhighlight(.*)/span, gi),$1);//高亮即将需要高亮的内容用类名为包含高亮格式的css类span标签包裹起来highlightedContent highlightedContent.replace(new RegExp(searchValue, gi),span classhighlight$/span);contentElement.innerHTML highlightedContent;} else {//清除高亮let highlightedContent content.replace(new RegExp(span classhighlight(.*)/span, gi),$1);}}/script
/body
/html上面的代码显示的网页大致如下 在搜索框输入文字例如“天安”两处天安均会高亮显示如下 再多输入一个“门”这时候上面的天安门不高亮显示了只有下面的天安门高亮显示 这就是网页上部文字说明的意思。上一行的天安与门字中间多了个html标签i导致匹配失败。所以要用原生JavaScript来实现高亮还要想法消除可能存在的HTML标签的影响。这里涉及到的算法还是比较复杂的。好在jquery有个mark.js库用来干这个事那就是小儿科了。以上面的页面为例只需要将input元素的oniput事件删除将原有的原生JavaScript代码删除引入jquery和mark库我这里是下载到本地了也可以用CDN方式引用然后增加数行代码即可完成。参见如下代码 input typetext idsearchInput placeholder输入搜索文本.../script srcjquery.min.js /scriptscript srcjquery.mark.es6.js/scriptscript$(function() {$(#searchInput).on(input.highlight, function() {// 获取指定搜索的字符串var searchTerm $(this).val();// 将解析中匹配的文本高亮$(.content).unmark().mark(searchTerm,{acrossElements: true,separateWordSearch: false,className:highlight,});}).trigger(input.highlight);});/script
用这个库html标签就不影响文本的匹配了参见下图 将这个功能应用到Anki中要能够离线使用需要将上面两个JavaScript库下载下来复制到“%APPDATA%/anki2”中的Anki登录用户名下的“collection.media”文件夹中为防止被Anki当作未使用资源删除应该将JavaScript库文件名修改为以英文状态的下划线开头。然后将最后那个代码片段复制到Anki卡片模板中的适当位置注意JavaScript库的名称前加上下划线修改一下相关的jquery选择符及相关类名就行了。
