如何对网页中的内容进行搜索

发布网友 发布时间:2022-04-22 00:36

我来回答

2个回答

懂视网 时间:2022-04-07 11:10

前台效果:

1c47607531c598617a5e8004471ebc1.png

html

<div class="container" style="z-index: 999" id="searchDiv">
 <div class="keyword-search">
  查找:
  <input id="key" type="text" style="width: 200px;" placeholder="关键词" />
  <a href="javascript:void(0);" class="prev" onclick='wordSearch(1)'><i class="c-icon"></i></a>
  <a href="javascript:void(0);" class="next" onclick='wordSearch()'><i class="c-icon"></i></a>
 </div>
 </div>

相关教程推荐:html教程

js

<script>//搜索功能
 var oldKey0 = "";
 var index0 = -1;var oldCount0 = 0;
 var newflag = 0;
 var currentLength = 0;
 function wordSearch(flg) {
  var key = $("#key").val(); //取key值
  if (!key) {
  return; //key为空则退出
  }
  getArray();
  focusNext(flg);
 }
 function focusNext(flg) {
  if (newflag == 0) {//如果新搜索,index清零
  index0 = 0;
  }
  if (!flg) {
  if (oldCount0 != 0) {//如果还有搜索
   if (index0 < oldCount0) {//左边如果没走完,走左边
   focusMove(index0);
   index0++;
   } else if (index0 == oldCount0) {//都走完了
   index0 = 0;
   focusMove(index0);
   index0++;
   }
   else {
   index0 = 0;//没确定
   focusMove(index0);
   index0++;
   }
  }
  } else {
  if (oldCount0 != 0) {//如果还有搜索
   if (index0 <= oldCount0 && index0 > 0) {//左边如果没走完,走左边
   index0--;
   focusMove(index0);
   } else if (index0 == 0) {//都走完了
   index0 = oldCount0;
   index0--
   focusMove(index0);
   }
  }
  }
 }
 function getArray() {
  newflag = 1;
  $(".contrast .result").removeClass("res");
  var key = $("#key").val(); //取key值
  if (!key) {
  oldKey0 = "";
  return; //key为空则退出
  }
  if (oldKey0 != key || $(".current").length != currentLength) {
  //重置
  index0 = 0;
  var index = 0;
  $(".contrast .result").each(function () {
   $(this).replaceWith($(this).html());
  });
  pos0 = new Array();
  if ($(".contrast-wrap").hasClass("current")) {
   currentLength = $(".current").length;
   $(".current .contrast").each(function () {
   $(this).html($(this).html().replace(new RegExp(key, "gm"), "<span id='result" + (index++) + "' class='result'>" + key + "</span>")); // 替换
   });
  } else {
   $(".contrast-wrap").addClass('current');
   currentLength = $(".current").length;
   $(".contrast").each(function () {
   $(this).html($(this).html().replace(new RegExp(key, "gm"), "<span id='result" + (index++) + "' class='result'>" + key + "</span>")); // 替换
   });
  }
  //$("#key").val(key);
  oldKey0 = key;
  //$(".contrast .result").each(function () {
  // $(this).parents('.contrast-wrap').addClass('current');
  // pos0.push($(this).offset().top);
  //});
  // pos0.push($(".contrast .result:eq(2)").offset().top - $(".contrast .result:eq(2)").parents(".contrast").offset().top);
  oldCount0 = $(".contrast .result").length;
  newflag = 0;
  }
 }
 function focusMove(index0) {
  $(".contrast .result:eq(" + index0 + ")").parents('.contrast-wrap').addClass('current');
  $(".contrast .result:eq(" + index0 + ")").addClass("res");
  var top = $(".contrast .result:eq(" + index0 + ")").offset().top + $(".contrast .result:eq(" + index0 + ")").parents(".contrast").scrollTop();
  var intop = top - $(".contrast .result:eq(" + index0 + ")").parents(".contrast").offset().top;
  $(".contrast .result:eq(" + index0 + ")").parents(".contrast").animate({ scrollTop: intop }, 200);
  if ($(".contrast .result:eq(" + index0 + ")").parents(".contrast").scrollTop() == 0) {
  $("html, body").animate({ scrollTop: top - 200 }, 200);
  } else {
  $("html, body").animate({ scrollTop: $(".contrast .result:eq(" + index0 + ")").parents(".contrast").offset().top - 200 }, 200);
  }
 }
 $('#key').change(function () {
  if ($('#key').val() == "") {
  index0 = 0;
  $(".contrast .result").each(function () {
   $(this).replaceWith($(this).html());
  });
  oldKey0 = "";
  }
 });
 </script>

视频教程推荐:html视频教程

热心网友 时间:2022-04-07 08:18

搜索网页内容步骤:
1.
打开需要搜索内容的网页
2.
按住ctrl后按f
3.
右上角出现搜索框
4.
搜索框内输入要查询的关键字
5.
搜索框会自动计算出出现次数
6.
网页内对该关键词会高亮显示
7.
定位需要找的内容即可

 当我们点进用搜索引擎搜到的网页时,有时会发现一眼找不到与搜索的词相符的内容;此时,如果一行行慢慢去找,岂不浪费时间和精力,其实浏览都为我们设计了查找功能,只要输入想找的词,即刻以亮的背景颜色显示该词。

  一般浏览器都是同时按 Ctrl + F 调出查找窗口,下面以 ie8 为例具体说明。

  1、打开一个 ie 窗口,同时按 Ctrl + F(或者依次选择菜单栏的“编辑(E)——在此页上查找(F)”),调出查找窗口,如图1所示:

图1

 

  2、输入想要查找的词,比如图1中查找“商场打折”,网页中就以*为背景色显示所有的“商场打折”这个词。

  3、查找完后想隐藏查找窗口,点击“查找”前面的“黑色叉”即可。

  4、查找输入框的右边,有“上一个、下一个”按钮,点击“下一个”可以定位到下一个“商场打折”;同样,点击“上一个”可以定位到上一个“商场打折”。此外,还有一个“选项”下接选择框,里面有“全字匹配和区分大小写”,可以根据查找需求选择。

网页是构成网站的基本元素,是承载各种网站应用的平台。通俗地说,您的网站就是由网页组成的,如果您只有域名和虚拟主机而没有制作任何网页的话,您的客户仍旧无法访问您的网站。

网页是一个包含HTML标签的纯文本文件,它可以存放在世界某个角落的某一台计算机中,是万维网中的一“页”,是超文本标记语言格式(标准通用标记语言的一个应用,文件扩展名为.html或.htm)。网页通常用图像档来提供图画。网页要通过网页浏览器来阅读。

中文名

网络页面

外文名

web page

阅读方式

网页浏览器

拼音

wǎng yè

中文缩写

网页

声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com