个人中心
gpt4 book ai didi

javascript - HTML 页面搜索

转载 作者：行者123 更新时间：2023-11-28 02:52:42 25 4
gpt4 key购买 nike

我有一个非常长的 html 文件(超过 20K 行)，我想进行搜索以找到搜索词，然后滚动到 li class="page"data-name="XX"。如果找到该术语的多个实例，我们需要一个“下一个”结果按钮。

这是我要搜索的 HTML 文件的摘录:

  <li class="page" data-name="11">
<div class="pageResizer" style="width:640px;height:960px;">&nbsp;</div>
<div id="item690" class="pageItem" alt="Rectangle">&nbsp;</div>
<div id="item728" class="pageItem" alt="Rectangle">&nbsp;</div><button class="pageItem" alt="Home" id="item1426" data-id="1426" onclick="nav.to(5);">&nbsp;</button><button class="pageItem" alt="prevBtn" id="item1423" data-id="1423" onclick="nav.back(this);">&nbsp;</button><button class="pageItem" alt="nextBtn" id="item2550" data-id="2550" onclick="nav.next(this);">&nbsp;</button><img src="assets/images/blank.gif" class="pageItem" alt="Rectangle" style="left:491px;top:11px;" data-src="assets/images/item_2757.png"/>
<div id="item2788" class="pageItem singleline" alt="Lafayette Chamber">
  <p class="autoParaStyle1">Lafayette Chamber</p>
</div><button class="pageItem" alt="Share" id="item3136" data-id="3136">&nbsp;</button>
<a href="javascript:nav.to(2);"><button class="pageItem" alt="Help" id="item2977" data-id="2977" onclick="nav.to(2);">&nbsp;</button>
</a><img src="assets/images/blank.gif" class="pageItem" alt="Rectangle" style="left:1px;top:66px;" data-src="assets/images/item_4899.jpg"/><img src="assets/images/blank.gif" class="pageItem" alt="Rectangle" style="left:1px;top:707px;" data-src="assets/images/item_4901.jpg"/>
<div id="item4906" class="pageItem singleline" alt="lafayETTE ">
  <p class="autoParaStyle13">lafayETTE<br />
  </p>
</div>
<div id="item4937" class="pageItem singleline" alt="HISTORY">
  <p class="autoParaStyle14">HISTORY</p>
</div>
<div id="item4982" class="pageItem" alt=" little more than a century ago, the first pioneers trickled into this region after a long journey across the Great P...">
  <p class="Article-Body"> <span class="autoCharStyle5">little more than a century ago, the first pioneers trickled into this region after a long journey across the Great Plains.  The gold rush attracted more and more adventurous fortune seekers who were closely followed by other settlers.  The honeymoon of Lafayette and Mary E. Miller was spent crossing the plains and arriving in the Boulder region.  In 1863, they started farming the Burlington (Longmont) area and soon moved south and settled in the present site of Lafayette.  Lafayette Miller was an industrious man and besides farming, he operated the stage stop and ran several meat markets.  His sudden death in 1878 left Mary Miller with six small children to raise.  She did this and more…she raised a town!<br /></span>      </p>
  <p class="autoParaStyle8"><br /></p>
</div>
<div id="item27143" class="pageItem singleline" alt="A">
  <p class="autoParaStyle15">A</p>
</div>

这是我目前的代码:

<script>
function search() {

var name = document.getElementById("searchForm").elements["searchItem"].value;
var pattern = name.toLowerCase();
var targetId = "";

var divs = document.getElementsByClassName("page");
for (var i = 0; i < divs.length; i++) {
  var para = divs[i].getElementsByTagName("p");
  var index = para[0].innerText.toLowerCase().indexOf(pattern);
  if (index != -1) {
     targetId = divs[i].parentNode.id;
     document.getElementById(targetId).scrollIntoView();
     break;
  }
}  
}
</script>

<form id="searchForm" action="javascript:search();">
<div class="input-group">
  <button id="go"  type="button" 
          onclick="document.getElementById('searchForm').submit(); return false;">
  Search</button>
  <input type="text" id="searchItem" class="form-control" placeholder="Search" cols="50" rows="2">
</div>
</form>

不确定我需要对我的代码做些什么才能完成这项工作，也不知道如何制作“下一个结果”按钮。

最佳答案

我认为这就是您要找的:

HTML:

<body>
  <form id="searchForm" action="javascript:search();" class="form">
    <button id="nextButton" onclick="nextItem()" type="button" class="make-invisible">NEXT</button>
    <div class="input-group">
      <button id="go">Search</button>
      <input type="text" id="searchItem" name="searchItem" class="form-control" placeholder="Search" cols="50" rows="2">
    </div>
  </form>
  <ul>
    <li class="page" data-name="foo">Has data-name = foo</li>
    <li class="page" data-name="foo">Has data-name = foo</li>
    ...
  </ul>
</body>

JavaScript:

var selectedItems;
var currentlySelectedItem;
var makeInvisibleClassName = "make-invisible";
var nextButton = document.querySelector("#nextButton");

function search() {
  makeInvisible();
  var searchPhrase = document.querySelector("#searchItem").value;
  selectedItems = document.querySelectorAll(".page[data-name='" + searchPhrase + "']");
  if (selectedItems.length === 0) {
    return;
  }
  if (selectedItems.length > 1) {
    makeVisible();
  }
  currentlySelectedItem = 0;
  nextItem();
}

function nextItem() {
  selectedItems[currentlySelectedItem].scrollIntoView();
  currentlySelectedItem++;
  if (currentlySelectedItem >= selectedItems.length) {
    currentlySelectedItem = 0;
  }
}

//////////
function makeInvisible() {
  nextButton.classList.add(makeInvisibleClassName);
}

function makeVisible() {
  nextButton.classList.remove(makeInvisibleClassName);
}

CSS:

.form {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

#nextButton {
  margin-right: 10px;
}

.make-invisible {
  display: none;
}

这是工作 Demo

好吧，让我解释一下我在这里做了什么。
当你有一个表单时，你实际上不需要这样做:

<button id="go" type="button" onclick="document.getElementById('searchForm').submit(); return false;">

相反，您可以非常简单:

<button id="go">Search</button>

表单中的默认按钮类型是 type="submit"，它会自动触发 action 属性中指定的事件。

接下来是 NEXT 按钮。我对其进行了硬编码，为了显示和隐藏它，我将添加或删除类 make-invisible。请注意按钮在开始时是不可见的。它还有一个点击事件会触发 nextItem()

<button id="nextButton" onclick="nextItem()" type="button" class="make-invisible">NEXT</button>

我还制作了 2 个全局变量:selectedItems，它将存储所选项目的数组和 currentlySelectedItem，它具有当前滚动到项目的索引。

search() 函数获取所有具有类名 page 且具有属性 data-name 和指定字词的元素。然后它检查是否有不止一个结果。如果是这样，它会使按钮可见。

nextItem() 函数滚动到所选元素，并将索引加一。如果索引值大于则有匹配元素，则开始循环。

关于javascript - HTML 页面搜索，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38727135/

25 4 0
文章推荐： c++ - 井字游戏 - 如何在无效输入后不打印结果
文章推荐： java - 从 HTML 字符串中获取 srcattribute 的正则表达式
文章推荐： html - 如何使我的图像和 div 响应屏幕尺寸
文章推荐： css - 在具有不同宽高比的屏幕上处理 CSS 背景图像。 (16 :9 -> 9:16)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com