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

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

共2个回答

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

前台效果：

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教程

<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è

中文缩写

网页

全部栏目

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