PHP 站內搜尋關鍵字高亮顯示實作教學

需求背景

搜尋結果頁若能將使用者輸入的關鍵字以顏色或粗體標示，能大幅提升閱讀體驗。本文示範如何以 PHP str_replace() 結合 HTML 標籤，快速實現關鍵字高亮。

核心原理

將資料庫查詢回的字串中，符合關鍵字的部分替換為 <mark>關鍵字</mark> 或 <span class="highlight">關鍵字</span>，再輸出至瀏覽器。

資料庫準備

-- 建立資料庫與資料表
CREATE DATABASE `searchKey` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
USE `searchKey`;

CREATE TABLE `search` (
  `id` INT(4) NOT NULL AUTO_INCREMENT,
  `keyword` VARCHAR(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4;

-- 測試資料
INSERT INTO `search` (`keyword`) VALUES
('中國腳本編程第一站 www.jb51.net'),
('PHP 程式設計入門教學'),
('MySQL 資料庫優化技巧'),
('JavaScript 前端開發實戰');

完整程式碼 search.php

<?php
// 設定編碼
header('Content-Type: text/html; charset=utf-8');

// 資料庫連線參數（請依實際環境修改）
$host = 'localhost';
$user = 'root';
$pass = 'root';
$dbname = 'searchKey';

$highlight = ''; // 高亮後的輸出內容

if ($_SERVER['REQUEST_METHOD'] === 'POST' && !empty($_POST['keyword'])) {
    $keyword = trim($_POST['keyword']);

    // 使用 PDO 防止 SQL 注入
    try {
        $pdo = new PDO("mysql:host={$host};dbname={$dbname};charset=utf8mb4", $user, $pass);
        $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

        $sql = "SELECT `keyword` FROM `search` WHERE `keyword` LIKE :kw";
        $stmt = $pdo->prepare($sql);
        $stmt->execute([':kw' => "%{$keyword}%"]);

        // 關鍵字高亮處理
        $highlightTag = '<mark style="background:#ff0; padding:0 2px; border-radius:3px;">$1</mark>';
        $pattern = '/(' . preg_quote($keyword, '/') . ')/iu';

        while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
            $highlighted = preg_replace($pattern, $highlightTag, $row['keyword']);
            $highlight .= "{$highlighted}<br>\n";
        }
    } catch (PDOException $e) {
        $highlight = '資料庫錯誤：' . $e->getMessage();
    }
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>關鍵字高亮搜尋示範</title>
<style>
  body {font-family: "Microsoft JhengHei", sans-serif; max-width: 600px; margin: 2rem auto; line-height: 1.6;}
  mark {background: #fff3cd; color: #000;}
  form {margin-bottom: 1.5rem;}
  input[type=text] {padding: 0.5rem; width: 70%;}
  input[type=submit] {padding: 0.5rem 1rem; cursor: pointer;}
</style>
</head>
<body>
  <h2>站內搜尋關鍵字高亮示範</h2>
  <form method="post">
    <input type="text" name="keyword" placeholder="請輸入搜尋關鍵字..." value="<?php echo isset($_POST['keyword']) ? htmlspecialchars($_POST['keyword']) : ''; ?>">
    <input type="submit" value="搜尋">
  </form>
  <div>
    <?php echo $highlight ?: '請輸入關鍵字進行搜尋'; ?>
  </div>
</body>
</html>

關鍵技術點解析

進階優化建議

• 多關鍵字支援：將輸入以空白分割，迴圈依次替換或組合正則 /keyword1|keyword2|keyword3/iu。
• 效能考量：大量資料建議使用全文搜尋引擎（如 Elasticsearch、Meilisearch）或 MySQL 全文索引。
• XSS 防護：輸出前務必對原始資料做 htmlspecialchars()，再進行高亮替換，避免資料庫內含惡意腳本。

總結

透過 preg_replace() 搭配 <mark> 標籤，即可輕鬆實現關鍵字高亮。搭配 PDO 安全查詢與 UTF-8 正則修飾符，能穩定支援中英文混合搜尋，是中小型專案的實用解法。