转换为语音并朗读全文 00:00 / 00:00

不二话了,直接上代码:
JS:

<script type="text/javascript">
function encode(s){
return s.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/([\\\.\*\[\]\(\)\$\^])/g,"\\$1");
}
function decode(s){
return s.replace(/\\([\\\.\*\[\]\(\)\$\^])/g,"$1").replace(/>/g,">").replace(/</g,"<").replace(/&/g,"&");
}
function highlight(s){
if (s.length==0){
alert('请输入你要搜索的内容!');
return false;
}
s=encode(s);
var obj=document.getElementsByTagName("body")[0];
var t=obj.innerHTML.replace(/<a\s+class=.?highlight.?>([^<>]*)<\/a>/gi,"$1");
obj.innerHTML=t;
var cnt=loopSearch(s,obj);
t=obj.innerHTML
var r=/{searchHL}(({(?!\/searchHL})|[^{])*){\/searchHL}/g
t=t.replace(r,"<a class='highlight' name='highlighttext'>$1</a>");
obj.innerHTML=t;
window.location.href='#highlighttext';
}
function loopSearch(s,obj){
var cnt=0;
if (obj.nodeType==3){
cnt=replace(s,obj);
return cnt;
}
for (var i=0,c;c=obj.childNodes[i];i++){
if (!c.className||c.className!="highlight")
cnt+=loopSearch(s,c);
}
return cnt;
}
function replace(s,dest){
var r=new RegExp(s,"g");
var tm=null;
var t=dest.nodeValue;
var cnt=0;
if (tm=t.match(r)){
cnt=tm.length;
t=t.replace(r,"{searchHL}"+decode(s)+"{/searchHL}")
dest.nodeValue=t;
}
return cnt;
}
</script>

搜索:

<form onsubmit="highlight(this.s.value);return false;">
<input name="s" id="s" class="sou" />
<input type="submit" id="submit" value="搜索一下试试"/>
</form>

在线预览

如果你觉得文章不错,可以给点小小奖励~

微信

微信

支付宝

支付宝

当昵称为 QQ 时将自动匹配对应昵称和邮箱
带符号 * 的表示必填项
  1. 羽毛
    羽毛

    感谢博主 对我来说很有用哈 虽然只是替代了Ctrl+F这么一个简单的动作 但是对访问者来说提高了用户体验
    对于只会看电影聊QQ网购的MM而言 是非常方便的

    回复
  2. 小五
    小五

    如果你查找下一个就更好了

    回复
    1. 麦田一根葱
      麦田一根葱博主

      以上代码来自互联网,不想弄……

      回复
  3. 大喇叭
    大喇叭

    这个不错啊啊...

    回复
    1. 麦田一根葱
      麦田一根葱博主

      分享美

      回复
  4. 黎健雄
    黎健雄

    一般用不到吧,。,
    页内搜索直接ctrl+f。。。。
    好吧我多说什么了。。
    灌水闪人。。

    回复
    1. 麦田一根葱
      麦田一根葱博主

      @黎健雄: 虽然用不到...但是分享总是好的 :niubi:

      回复
  5. 梦月酱
    梦月酱

    技术控 :oops:

    回复
    1. 麦田一根葱
      麦田一根葱博主

      @梦月酱: :haixiu: 夸奖了

      回复