本文详解如何在基于 jquery + php 的实时搜索功能中，正确实现搜索关键词的 html 高亮渲染，重点解决因函数未调用导致的高亮失效问题，并提供健壮、安全的实现方案。
本文详解如何在基于 jquery + php 的实时搜索功能中，正确实现搜索关键词的 html 高亮渲染，重点解决因函数未调用导致的高亮失效问题，并提供健壮、安全的实现方案。
在动态加载搜索结果的场景中（如通过 AJAX 请求 get_data.php 获取表格数据），仅将返回的 HTML 插入 #hasil 容器是不够的——若需对关键词进行高亮（例如包裹 ），必须在内容渲染之后立即执行高亮逻辑。原代码中定义了 highlight_word() 函数，但从未被调用，这是高亮失败的根本原因。
✅ 正确调用时机：在 success 回调中先设 HTML，再高亮
需将 highlight_word() 的调用嵌入 AJAX 成功回调，并传入已插入 DOM 的最新内容（或更推荐：传入 data 字符串，在插入前处理，避免重复解析）：
success: function(data) {
// 方案一（推荐）：先处理高亮，再插入 —— 更可控、避免 DOM 重绘干扰
var highlighted = highlight_word(data);
$('#hasil').html(highlighted);
// 方案二（兼容原结构）：插入后再高亮，但需确保 #hasil 已更新
// $('#hasil').html(data);
// highlight_word($('#hasil').html()); // 注意：此时传入的是 innerHTML 字符串
}? 改进版 highlight_word()：支持转义与多关键词
原始函数存在两个隐患：① 未转义正则特殊字符（如 .、*、( 等会破坏匹配）；② 多次输入触发时，高亮标签可能被重复嵌套。优化如下：
function highlight_word(html, keyword) {
if (!keyword || !html) return html;
// 转义正则元字符，确保字面量匹配
var escapedKeyword = keyword.replace(/[.*+?^${}()|[]\]/g, '\$&');
var pattern = new RegExp('(' + escapedKeyword + ')', 'gi');
return html.replace(pattern, '<span class="highlight">$1</span>');
}
// 在 keyup 中调用示例：
$('#search').on('keyup', function() {
var search = $(this).val().trim();
load_data(search);
// 注意：此处不直接高亮，因为 data 尚未返回 → 高亮必须放在 success 内！
});⚠️ 关键注意事项
- 禁止在 load_data() 外部调用 highlight_word()：data 仅在 AJAX 响应后可用，提前调用将传入 undefined。
- 避免 XSS 风险：若 get_data.php 返回的内容含用户输入且未经转义，直接 html() 插入可能引发漏洞。高亮逻辑本身不引入新风险，但需确保服务端已做好输出编码。
-
CSS 样式不可少：添加基础高亮样式，否则视觉无变化：
.highlight { background-color: #fff9c4; font-weight: bold; padding: 0 4px; border-radius: 3px; } - 空格与大小写处理：当前使用 gi 标志（全局+忽略大小写），符合多数搜索场景；如需精确匹配，改为 g 并移除 i。
✅ 完整整合示例（关键片段）
$(document).ready(function() {
load_data();
function load_data(search) {
$.ajax({
url: "get_data.php",
method: "POST",
data: { search: search },
success: function(data) {
var highlighted = highlight_word(data, search || '');
$('#hasil').html(highlighted);
}
});
}
$('#search').on('input', function() { // 使用 'input' 替代 'keyup'，支持粘贴/语音输入
var search = $(this).val().trim();
load_data(search);
});
});至此，搜索词将在每次请求返回后自动高亮，逻辑清晰、鲁棒性强，可直接集成到现有项目中。
