html+css+js实现简单的搜索关键词标记为红色

if时光重来

已于 2023-08-23 16:57:57 修改

阅读量677

点赞数 1

分类专栏： html js 文章标签： html css javascript

于 2023-08-23 16:56:26 首次发布

本文链接：https://blog.csdn.net/admin_web/article/details/132456409

版权

js 同时被 2 个专栏收录

42 篇文章 1 订阅

订阅专栏

html

24 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>搜索页</title>
<style>
  body {
    font-family: Arial, sans-serif;
  }
  #search-container {
    text-align: center;
    padding: 20px;
  }
  #search-input {
    width: 300px;
    padding: 5px;
  }
  #results-container {
    margin-top: 20px;
  }
  .highlight {
    color: red;
    font-weight: bold;
  }
</style>
</head>
<body>
  <div id="search-container">
    <input type="text" id="search-input" placeholder="请输入关键词">
    <button onclick="search()">搜索</button>
  </div>
  <div id="results-container">
    <ul id="results-list"></ul>
  </div>

  <script>
    function search() {
      const searchInput = document.getElementById('search-input');
      const searchTerm = searchInput.value.toLowerCase();
      const resultsList = document.getElementById('results-list');
      resultsList.innerHTML = '';

      // 在这里替换为你的数据，以下为示例数据
      const data = [
        '这是一个示例句子。',
        '在这个例子中，关键词会被标记。',
        '你可以根据需要替换这些数据。',
        '示例搜索功能使用JavaScript实现。',
        '关键词可以是用户在搜索框中输入的内容。',
        '记得根据你的实际需求进行修改。'
      ];

      data.forEach(item => {
        const lowerCaseItem = item.toLowerCase();
        if (lowerCaseItem.includes(searchTerm)) {
          const highlightedItem = item.replace(new RegExp(searchTerm, 'gi'), match => `<span class="highlight">${match}</span>`);
          const li = document.createElement('li');
          li.innerHTML = highlightedItem;
          resultsList.appendChild(li);
        }
      });
    }
  </script>
</body>
</html>