用过谷歌浏览器页面内容查询功能的人都知道,在搜索英文字符串的时候是不区分大小写的(被这个坑过了~哎~),对于经常检索代码关键字的人来说这是非常不方便的。比如搜索“Hello”的时候会把“hello”等相关无用的字符串都给标记高亮了
下面给大家来介绍一种自定义js标签的方式来实现匹配大小写搜索功能:
1、打开谷歌浏览器,新增一个标签页,点击【五角星】符号,自定义一个新标签页:
2、填写标签名称,点击【更多】:
3、在修改书签页的【网址】栏输入以下js代码
javascript:(function(){var text=prompt('Search for:','');if(text==null || text.length==0)return;var spans=document.getElementsByClassName('labnol');if(spans){for(var i=0;i < spans.length;i++){spans[i].style.backgroundColor='transparent';}}function searchWithinNode(node,te,len){var pos,skip,spannode,middlebit,endbit,middleclone;skip=0;if(node.nodeType==3){pos=node.data.indexOf(te);if(pos>=0){spannode=document.createElement('span');spannode.setAttribute('class','labnol');spannode.style.backgroundColor='yellow';middlebit=node.splitText(pos);endbit=middlebit.splitText(len);middleclone=middlebit.cloneNode(true);spannode.appendChild(middleclone);middlebit.parentNode.replaceChild(spannode,middlebit);skip=1;}}else if(node.nodeType==1 && node.childNodes && node.tagName.toUpperCase()!='SCRIPT' && node.tagName.toUpperCase !='STYLE'){for(var child=0;child < node.childNodes.length;++child){child=child+searchWithinNode(node.childNodes[child],te,len);}}return skip;}searchWithinNode(document.body,text,text.length);})();
4、点击【保存】后,书签栏会出现搜索标签,使用的时候就比较简单了,点击下该书签,会弹出个输入框,试试输入字符串,然后确定,有没有发现页面里高亮出来的是大小写完全匹配的字符串了=..=!!!