JS实现静态页面搜索并高亮显示功能完整示例

下面是JS实现静态页面搜索并高亮显示功能的完整攻略。

1. 理解需求

我们需要实现一个静态页面内的搜索功能，当用户在搜索框中输入关键词后，页面中相关内容需要被高亮显示。

2. 编写HTML结构和样式

需要准备一个HTML文件，其中包含一个搜索框和搜索结果的展示区域。可以参考如下HTML代码：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>搜索功能示例</title>
    <style>
        .search {
            margin: 20px auto;
            width: 600px;
            text-align: center;
        }
        .search input[type="text"] {
            width: 300px;
            height: 30px;
            padding: 0 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .result {
            margin: 20px auto;
            width: 600px;
            line-height: 30px;
        }
        .highlight {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="search">
        <input type="text" id="searchInput" placeholder="请输入关键词">
        <button onclick="search()">搜索</button>
    </div>
    <div class="result" id="result"></div>
</body>
</html>

3. 实现搜索功能

在HTML文件中添加JavaScript代码，实现搜索功能。具体代码如下：

function search() {
  // 获取搜索关键词和结果展示区域
  var keyword = document.getElementById('searchInput').value.trim();
  var resultArea = document.getElementById('result');

  // 如果关键词为空，直接返回
  if (keyword === '') {
    resultArea.innerHTML = '';
    alert('请输入搜索关键词');
    return;
  }

  // 获取所有内容元素
  var elements = document.querySelectorAll('.content');

  // 遍历每一个内容元素，查找是否包含关键词
  for (var i = 0; i < elements.length; i++) {
    var content = elements[i].innerHTML;
    if (content.indexOf(keyword) !== -1) {
      // 如果包含关键词，将内容区域改为高亮显示
      content = content.replace(keyword, '<span class="highlight">' + keyword + '</span>');
      elements[i].innerHTML = content;
      resultArea.appendChild(elements[i].cloneNode(true));
    }
  }

  // 隐藏不包含关键词的元素
  for (var i = 0; i < elements.length; i++) {
    if (elements[i].innerHTML.indexOf(keyword) === -1) {
      elements[i].style.display = 'none';
    }
  }
}

4. 示例说明

以下是两个示例说明。

示例一

在上面的HTML文件中，新增如下内容：

<div class="content">
  <h2>HTML</h2>
  <p>HTML (HyperText Markup Language) 是用来描述网页的一种语言。</p>
</div>
<div class="content">
  <h2>CSS</h2>
  <p>CSS (Cascading Style Sheets) 是用来描述网页外观样式的语言。</p>
</div>
<div class="content">
  <h2>JavaScript</h2>
  <p>JavaScript 是一种可以在网页中实现交互效果的编程语言。</p>
</div>

当用户在搜索框中输入“CSS”时，结果区域展示出：

CSS (Cascading Style Sheets) 是用来描述网页外观样式的语言。

另外两个不包含关键词的内容区域被隐藏。

示例二

在另一个HTML文件中，新增如下内容：

<div class="content">
  <h2>HTML</h2>
  <p>HTML (HyperText Markup Language) 是用来描述网页的一种语言。</p>
</div>
<div class="content">
  <h2>CSS</h2>
  <p>CSS (Cascading Style Sheets) 是用来描述网页外观样式的语言。</p>
</div>
<div class="content">
  <h2>JavaScript</h2>
  <p>JavaScript 是一种可以在网页中实现交互效果的编程语言。</p>
</div>

当用户在搜索框中输入“JavaScript”时，结果区域展示出：

HTML (HyperText Markup Language) 是用来描述网页的一种语言。
CSS (Cascading Style Sheets) 是用来描述网页外观样式的语言。
JavaScript 是一种可以在网页中实现交互效果的编程语言。

将所有内容区域中“JavaScript”关键词标红高亮显示。

以上是JS实现静态页面搜索并高亮显示功能的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现静态页面搜索并高亮显示功能完整示例 - Python技术站

JS实现静态页面搜索并高亮显示功能完整示例

1. 理解需求

2. 编写HTML结构和样式

3. 实现搜索功能

4. 示例说明

示例一

示例二

相关文章