JavaScript搜索关键词加粗技巧全解析，轻松实现网页文本高亮，js网页搜索关键词

欧气 2024年11月22日 07:16 0 0

本文目录导读：

HTML结构
JavaScript代码
解释

在网页开发过程中，搜索功能是提高用户体验的重要手段，当用户在搜索框中输入关键词时，我们通常希望将搜索结果中的关键词加粗显示，以便用户快速找到所需信息，本文将详细介绍JavaScript搜索关键词加粗的技巧，帮助开发者轻松实现网页文本高亮。

HTML结构

在开始编写JavaScript代码之前，我们需要搭建一个简单的HTML结构，以下是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript搜索关键词加粗</title>
</head>
<body>
    <input type="text" id="searchInput" placeholder="请输入搜索关键词">
    <button onclick="searchKeyword()">搜索</button>
    <div id="content">
        <p>JavaScript是一种高级的、解释性的编程语言，拥有丰富的API和强大的功能。</p>
        <p>在网页开发中，JavaScript发挥着至关重要的作用，如实现动态效果、与服务器交互等。</p>
        <p>下面是一个简单的JavaScript代码示例：</p>
        <pre>
            <code>function sayHello() {
                alert('Hello, world!');
            }</code>
        </pre>
    </div>
</body>
</html>

JavaScript代码

我们将编写JavaScript代码，实现搜索关键词加粗的功能。

JavaScript搜索关键词加粗技巧全解析，轻松实现网页文本高亮，js网页搜索关键词

图片来源于网络，如有侵权联系删除

function searchKeyword() {
    // 获取搜索框中的关键词
    var keyword = document.getElementById('searchInput').value;
    // 获取内容区域
    var content = document.getElementById('content');
    // 创建一个正则表达式，用于匹配关键词
    var regex = new RegExp(keyword, 'gi');
    // 使用正则表达式替换关键词为加粗文本
    var newContent = content.innerHTML.replace(regex, '<strong>$1</strong>');
    // 将处理后的内容重新赋值给内容区域
    content.innerHTML = newContent;
}