问题引入

网页地址栏的 URL 中经常在域名后通过 ?、& 和 = 这三个英文符号拼接一串字符：

搜索引擎对输入的搜索内容进行的处理，并通过在 URL 中携带参数的方式获取搜索内容。在展示搜索内容的页面中，脚本往往需要获取 URL 中的参数做一些额外的处理，例如给搜索的关键字加上高亮的颜色：

本案例即是实现这个功能

题目已经给我们搭建好了html框架

当前效果：

目标效果：

当wd携带参数时，可以直接识别并高亮

若wd无参数，那么不进行任何高亮展示

完成效果

核心代码

// 定义一个高亮显示的函数
function highlightText(searchString) {
  document.querySelectorAll('.c-title, .content-right').forEach((item, index) => {
    item.innerHTML = item.innerHTML.replace(new RegExp(searchString, 'g'), `<em>${searchString}</em>`);
  });
}

// 初始化页面，调用高亮函数
let url = document.querySelector('input').value;
let searchParams = new URL(url).searchParams;
let searchString = searchParams.get('wd');
highlightText(searchString);

// 点击搜索按钮
document.querySelector('.search-box').addEventListener('click', function() {
  // 取消高亮
  document.querySelectorAll('.c-title, .content-right').forEach((item, index) => {
    item.innerHTML = item.innerHTML.replace(/<em>(.*?)<\/em>/g, '$1');
  });

  // 获取新url中的参数并重新调用高亮显示的函数
  url = document.querySelector('input').value;
  searchParams = new URL(url).searchParams;
  searchString = searchParams.get('wd');
  highlightText(searchString);
});

具体思路是：

highlightText(searchString) 函数定义了一个高亮显示文本的方法。它接受一个字符串参数 searchString，代表要高亮显示的关键词。
document.querySelectorAll('.c-title, .content-right').forEach((item, index) => { ... }) 选择了页面上所有具有 "c-title" 或 "content-right" 类名的元素，并使用 forEach 方法对每个元素执行后续操作。
item.innerHTML = item.innerHTML.replace(new RegExp(searchString, 'g'), ${searchString}) 将元素的内部 HTML 内容中所有与 searchString 匹配的文本替换为带有 <em> 标签的高亮文本。
url = document.querySelector('input').value 获取输入框中的文本值，即搜索页的 URL。
searchParams = new URL(url).searchParams 解析 URL 中的查询参数。
searchString = searchParams.get('wd') 获取查询参数中名为 'wd' 的值，该值即为用户输入的搜索关键词。
highlightText(searchString) 调用 highlightText 函数，传入用户输入的搜索关键词，实现将搜索结果中匹配的关键词进行高亮显示。
document.querySelector('.search-box').addEventListener('click', function() { ... }) 给搜索按钮添加点击事件监听器。
document.querySelectorAll('.c-title, .content-right').forEach((item, index) => { ... }) 选择页面上所有具有 "c-title" 或 "content-right" 类名的元素，并使用 forEach 方法对每个元素执行后续操作。
item.innerHTML = item.innerHTML.replace(/<em>(.*?)</em>/g, '$1') 将元素的内部 HTML 内容中所有包含 <em> 标签的高亮文本替换为原始文本。
重复步骤4到7，获取新的搜索关键词并重新调用 highlightText 函数，实现取消原来的高亮效果，并根据新的搜索关键词重新进行高亮显示。

使用JavaScript实现URL 参数解析 | 青训营

问题引入

完成效果

核心代码