1. 項目概述為什么我們需要這兩個“小”功能做技術(shù)分享或者寫文檔的朋友肯定都遇到過這樣的場景你精心準(zhǔn)備了一篇教程里面嵌入了不少代碼示例。讀者想復(fù)制下來試試結(jié)果要么是手動選擇時漏了行要么是復(fù)制后格式全亂了還得自己調(diào)整縮進(jìn)。又或者你正在一個長長的技術(shù)討論串里尋找之前有人提到過的一個關(guān)鍵命令或錯誤信息只能靠肉眼一行行掃效率極低。這兩個痛點——“代碼塊復(fù)制”和“會話搜索”——看似是產(chǎn)品體驗上的細(xì)節(jié)但對于內(nèi)容生產(chǎn)者和重度用戶來說它們直接決定了信息傳遞的效率和協(xié)作的流暢度?！按a塊復(fù)制”功能核心是讓用戶能一鍵、無差錯地獲取代碼片段。這不僅僅是加個按鈕那么簡單它涉及到代碼高亮的保持、前后空白字符的處理、以及復(fù)制后格式的純凈性。而“會話搜索”功能則是在一個動態(tài)的、可能不斷增長的對話或文檔流中實現(xiàn)快速、精準(zhǔn)的全文檢索幫助用戶在海量信息中定位目標(biāo)。這兩個功能組合在一起能顯著提升以代碼和技術(shù)討論為核心場景的應(yīng)用的用戶體驗。我最近就在自己的知識庫項目里完整實現(xiàn)了這套組合拳。從最初覺得“不就是個按鈕和搜索框嗎”到深入實現(xiàn)時遇到的各種邊界情況處理再到最終打磨出穩(wěn)定好用的體驗整個過程踩了不少坑也積累了一些心得。這篇文章我就來詳細(xì)拆解一下這兩個功能的實現(xiàn)思路、技術(shù)細(xì)節(jié)以及那些官方文檔里不會告訴你的實操技巧。2. 整體設(shè)計與核心思路拆解在動手寫代碼之前我們先得把需求理清楚并確定一個高性價比的技術(shù)方案。我的項目是一個前端為主的知識管理工具技術(shù)棧是 React TypeScriptUI 庫用的是 Ant Design代碼高亮則選擇了流行的Prism.js。2.1 功能目標(biāo)定義首先我們得明確這兩個功能具體要做什么對于代碼塊復(fù)制一鍵觸發(fā)在每個代碼塊的右上角或其他醒目位置提供一個復(fù)制按鈕。精準(zhǔn)復(fù)制點擊后能將代碼塊內(nèi)的全部文本內(nèi)容包括縮進(jìn)復(fù)制到用戶的系統(tǒng)剪貼板。反饋明確復(fù)制成功后按鈕狀態(tài)或文案應(yīng)有明確變化例如“復(fù)制”變?yōu)椤耙褟?fù)制”并在幾秒后恢復(fù)給用戶清晰的操作反饋。格式純凈復(fù)制到剪貼板的內(nèi)容應(yīng)該是純文本不攜帶任何 HTML 標(biāo)簽或樣式方便直接粘貼到終端或代碼編輯器。對于會話搜索全局入口在會話列表或文檔區(qū)域的頂部提供一個常駐的搜索框。即時反饋輸入關(guān)鍵詞時實時過濾并高亮顯示所有匹配的會話或消息。定位精準(zhǔn)搜索結(jié)果應(yīng)能快速定位到包含關(guān)鍵詞的具體消息行并最好能滾動到視圖中。體驗友好支持模糊匹配、大小寫不敏感等并清晰展示“未找到結(jié)果”的狀態(tài)。2.2 技術(shù)方案選型與考量明確了目標(biāo)接下來就是選擇實現(xiàn)路徑。這里有幾個關(guān)鍵決策點代碼塊復(fù)制Clipboard API是唯一選擇現(xiàn)代瀏覽器提供了強(qiáng)大的Navigator.clipboardAPI。相比于古老的document.execCommand(copy)它更現(xiàn)代、更強(qiáng)大并且返回 Promise便于我們處理異步操作和錯誤。它的核心方法是writeText()用于寫入純文本。這是我們實現(xiàn)復(fù)制功能的基礎(chǔ)。需要注意的是這個 API 在安全上下文中HTTPS 或 localhost才能可靠工作這符合我們大多數(shù)現(xiàn)代 Web 應(yīng)用的環(huán)境。會話搜索前端過濾 vs 后端搜索這是一個架構(gòu)上的權(quán)衡。我的場景是會話數(shù)據(jù)量暫時不大單次加載通常在幾百條消息以內(nèi)且希望搜索響應(yīng)是即時的無網(wǎng)絡(luò)延遲。因此我選擇了前端過濾的方案。優(yōu)點速度快體驗流暢減輕服務(wù)器壓力。缺點如果會話歷史非常長例如上萬條一次性加載所有數(shù)據(jù)到前端再搜索會對性能和內(nèi)存造成壓力。對于數(shù)據(jù)量大的場景就必須采用后端搜索通過 API 接口分頁返回搜索結(jié)果。 我選擇前端過濾是基于當(dāng)前項目規(guī)模的合理判斷。實現(xiàn)上我會在組件內(nèi)維護(hù)原始數(shù)據(jù)列表和一個經(jīng)過過濾的“顯示列表”搜索關(guān)鍵詞變化時實時過濾并更新這個顯示列表。搜索高亮危險的innerHTML與安全的文本分割在搜索結(jié)果中高亮關(guān)鍵詞一個直覺的做法是用正則表達(dá)式替換然后直接設(shè)置innerHTML。例如content.replace(/關(guān)鍵詞/gi, mark$/mark)。但這是極度危險的如果用戶輸入包含 HTML 特殊字符如,或者更惡意的腳本片段直接進(jìn)行字符串替換并注入 HTML會導(dǎo)致嚴(yán)重的 XSS跨站腳本攻擊漏洞。 正確的做法是進(jìn)行安全的文本分割與重組。我們將文本按關(guān)鍵詞分割成片段然后使用 React 的createElement或直接使用數(shù)組 map 的方式將匹配的部分用mark標(biāo)簽包裹并渲染。mark標(biāo)簽是 HTML5 標(biāo)準(zhǔn)語義化標(biāo)簽專門用于標(biāo)記高亮且瀏覽器默認(rèn)會提供樣式通常是黃色背景。這樣既安全又符合語義。3. 代碼塊復(fù)制功能實現(xiàn)詳解理論說完我們開始動手。先實現(xiàn)代碼塊復(fù)制功能。3.1 構(gòu)建復(fù)制按鈕組件首先我們創(chuàng)建一個獨立的CopyButton組件讓它足夠通用可以附著在任何需要復(fù)制的元素旁邊。// CopyButton.tsx import React, { useState } from react; import { CopyOutlined, CheckOutlined } from ant-design/icons; import { message } from antd; import ./CopyButton.css; // 用于一些樣式 interface CopyButtonProps { text: string; // 要復(fù)制的文本 className?: string; } const CopyButton: React.FCCopyButtonProps ({ text, className }) { const [copied, setCopied] useState(false); const handleCopy async () { if (!text) { message.warning(沒有內(nèi)容可復(fù)制); return; } try { // 使用現(xiàn)代 Clipboard API await navigator.clipboard.writeText(text); setCopied(true); message.success(已復(fù)制到剪貼板); // 可選Antd 的全局提示 // 2秒后恢復(fù)狀態(tài) setTimeout(() setCopied(false), 2000); } catch (err) { console.error(復(fù)制失敗:, err); // 降級方案對于某些不支持或權(quán)限受限的瀏覽器可以嘗試創(chuàng)建隱藏的textarea來復(fù)制 message.error(復(fù)制失敗請嘗試手動選擇復(fù)制); // 這里可以調(diào)用備用的 copyFallback 函數(shù) } }; return ( button className{copy-button ${className || } ${copied ? copied : }} onClick{handleCopy} aria-label{copied ? 已復(fù)制 : 復(fù)制代碼} title復(fù)制代碼 {copied ? CheckOutlined style{{ color: #52c41a }} / : CopyOutlined /} span classNamecopy-button-text{copied ? 已復(fù)制 : 復(fù)制}/span /button ); }; export default CopyButton;關(guān)鍵點解析狀態(tài)管理使用copied狀態(tài)來控制按鈕的圖標(biāo)和文案。復(fù)制成功后切換到“已復(fù)制”狀態(tài)并用setTimeout在 2 秒后自動恢復(fù)。這個延遲時間需要足夠讓用戶感知又不能太長影響下一次操作。錯誤處理navigator.clipboard.writeText是異步的必須用try...catch包裹。失敗原因可能是瀏覽器不支持、用戶未授予權(quán)限在某些 iframe 中等。提供友好的錯誤提示至關(guān)重要。降級方案在catch塊中我們注釋了一個降級方案。對于某些老舊或特殊環(huán)境的瀏覽器可以創(chuàng)建一個隱藏的textarea元素將文本賦值給它然后使用document.execCommand(copy)來嘗試復(fù)制。雖然這是舊 API但作為降級手段是可行的。為了代碼清晰這里先不展開但你需要知道有這個后備選項。無障礙訪問aria-label和title屬性幫助屏幕閱讀器和鼠標(biāo)懸停提示提升可訪問性。3.2 與代碼高亮組件集成接下來我們需要在代碼高亮組件中嵌入這個按鈕。假設(shè)我們使用Prism.js來高亮代碼。// CodeBlock.tsx import React, { useRef, useEffect } from react; import Prism from prismjs; import prismjs/themes/prism-tomorrow.css; // 引入一個主題樣式 import CopyButton from ./CopyButton; import ./CodeBlock.css; interface CodeBlockProps { code: string; language: string; } const CodeBlock: React.FCCodeBlockProps ({ code, language }) { const codeRef useRefHTMLElement(null); useEffect(() { // 當(dāng) code 或 language 變化時重新高亮 if (codeRef.current) { Prism.highlightElement(codeRef.current); } }, [code, language]); // 獲取純凈的代碼文本用于復(fù)制 // 注意codeRef.current?.textContent 可能在高亮后包含Prism添加的DOM結(jié)構(gòu) // 更可靠的方法是直接使用傳入的 code prop或者從DOM中提取純文本 const getRawCodeText (): string { // 方法1直接使用傳入的code最可靠但需確保code是未轉(zhuǎn)義的 // return code; // 方法2從高亮后的DOM中提取textContent能處理一些空白符但依賴DOM if (codeRef.current) { return codeRef.current.textContent || code; } return code; }; return ( div classNamecode-block-wrapper div classNamecode-block-header span classNamecode-language{language}/span CopyButton text{getRawCodeText()} classNamecode-copy-btn / /div pre className{language-${language}} code ref{codeRef} className{language-${language}} {code} /code /pre /div ); }; export default CodeBlock;關(guān)鍵點與避坑指南復(fù)制內(nèi)容的來源這是最容易出問題的地方。codeRef.current.textContent會獲取元素內(nèi)所有子節(jié)點的文本內(nèi)容。在 Prism 高亮后代碼被拆分成多個帶樣式的span但textContent會智能地拼接這些 span 的文本通常能得到正確的純文本。然而在某些極端情況下比如代碼中包含 Prism 用來做標(biāo)記的特殊元素可能會有問題。最保險的做法是直接復(fù)制原始的code字符串。我在這里提供了兩種方式并傾向于使用原始的codeprop因為它絕對純凈。你需要根據(jù)你的數(shù)據(jù)流來決定。樣式定位通過 CSS 將CopyButton絕對定位在代碼塊的右上角。CodeBlock.css需要包含類似下面的樣式.code-block-wrapper { position: relative; background: #2d2d2d; border-radius: 6px; margin: 1em 0; } .code-block-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: rgba(0, 0, 0, 0.2); border-bottom: 1px solid #444; border-radius: 6px 6px 0 0; } .code-copy-btn { position: static; /* 在header內(nèi)flex布局無需絕對定位 */ }語言標(biāo)簽顯示代碼語言是一個很好的用戶體驗細(xì)節(jié)讓用戶一目了然。實操心得在測試復(fù)制功能時一定要粘貼到純文本編輯器如記事本和代碼編輯器如 VSCode里分別檢查。確保沒有多余的空行、行首尾的空白符特別是\n是符合預(yù)期的。有時候從 DOM 的textContent獲取的字符串其換行符的表現(xiàn)可能與原始字符串有細(xì)微差別。4. 會話搜索功能實現(xiàn)詳解接下來是更復(fù)雜的會話搜索。我們將實現(xiàn)一個實時搜索框能夠過濾會話列表并高亮關(guān)鍵詞。4.1 搜索框與狀態(tài)管理首先創(chuàng)建一個受控的搜索輸入框并管理搜索狀態(tài)。// ConversationSearch.tsx import React, { useState, useMemo, ChangeEvent } from react; import { Input } from antd; import { SearchOutlined } from ant-design/icons; import ConversationList from ./ConversationList; // 假設(shè)的會話列表組件 import { Message } from ../types; // 假設(shè)的消息類型定義 import ./ConversationSearch.css; interface ConversationSearchProps { allMessages: Message[]; // 完整的原始消息列表 } const ConversationSearch: React.FCConversationSearchProps ({ allMessages }) { const [searchTerm, setSearchTerm] useState(); const handleSearchChange (e: ChangeEventHTMLInputElement) { setSearchTerm(e.target.value.trim()); // 去除首尾空格 }; // 核心過濾邏輯 const filteredMessages useMemo(() { if (!searchTerm) { return allMessages; // 搜索詞為空返回全部 } const term searchTerm.toLowerCase(); return allMessages.filter(message { // 在消息的多個可能字段中搜索如 content, role 等 return ( message.content?.toLowerCase().includes(term) || message.role?.toLowerCase().includes(term) // 可以根據(jù)需要添加更多字段 ); }); }, [allMessages, searchTerm]); // 依賴項當(dāng)原始數(shù)據(jù)或搜索詞變化時重新計算 return ( div classNameconversation-search-container div classNamesearch-box Input prefix{SearchOutlined /} placeholder搜索會話內(nèi)容... value{searchTerm} onChange{handleSearchChange} allowClear sizelarge / /div div classNamesearch-status {searchTerm ( span 找到 {filteredMessages.length} 條相關(guān)消息 (關(guān)鍵詞: “{searchTerm}”) /span )} /div {/* 將過濾后的消息傳遞給列表組件并告知需要高亮的關(guān)鍵詞 */} ConversationList messages{filteredMessages} highlightTerm{searchTerm} / /div ); }; export default ConversationSearch;關(guān)鍵點解析性能優(yōu)化使用useMemo來緩存過濾結(jié)果。過濾操作尤其是當(dāng)allMessages很大時可能比較耗時。useMemo確保只有在allMessages或searchTerm真正變化時才重新計算過濾列表避免每次渲染都進(jìn)行不必要的計算。大小寫不敏感通過.toLowerCase()統(tǒng)一轉(zhuǎn)為小寫再進(jìn)行匹配實現(xiàn)大小寫不敏感的搜索這符合大多數(shù)用戶的預(yù)期。用戶體驗allowClear屬性允許用戶一鍵清空搜索框。同時我們提供了一個狀態(tài)行顯示搜索結(jié)果數(shù)量讓用戶對搜索效果有即時反饋。4.2 安全的高亮顯示實現(xiàn)現(xiàn)在來到最關(guān)鍵也最容易出錯的部分在列表項中安全地高亮關(guān)鍵詞。我們不能直接操作innerHTML。// HighlightedText.tsx - 一個可復(fù)用的高亮文本組件 import React from react; interface HighlightedTextProps { text: string; highlight?: string; } const HighlightedText: React.FCHighlightedTextProps ({ text, highlight }) { if (!highlight || !text) { return {text}/; // 無高亮詞或文本為空直接返回 } const parts text.split(new RegExp((${escapeRegExp(highlight)}), gi)); return ( {parts.map((part, index) { // 檢查當(dāng)前部分是否與高亮詞匹配忽略大小寫 const isMatch part.toLowerCase() highlight.toLowerCase(); return isMatch ? ( mark key{index} classNamesearch-highlight {part} /mark ) : ( React.Fragment key{index}{part}/React.Fragment ); })} / ); }; // 輔助函數(shù)轉(zhuǎn)義正則表達(dá)式中的特殊字符 // 這是防止XSS和正則錯誤的關(guān)鍵 function escapeRegExp(string: string): string { return string.replace(/[.*?^${}()|[\]\\]/g, \\$); // $ 表示匹配到的整個字符串 } export default HighlightedText;安全核心解析escapeRegExp函數(shù)這是整個高亮功能的“安全閥”。用戶輸入的highlight字符串可能包含正則表達(dá)式的特殊字符如.,*,?,[,],(,)等。如果直接將其放入new RegExp((${highlight}), gi)這些字符會被解釋為正則語法導(dǎo)致運行時錯誤例如輸入[而不閉合會拋出Invalid regular expression錯誤。行為異常.會匹配任意字符*會導(dǎo)致貪婪匹配使得高亮結(jié)果完全錯誤。潛在風(fēng)險雖然經(jīng)過轉(zhuǎn)義后直接 XSS 注入的風(fēng)險已通過 React 的轉(zhuǎn)義機(jī)制降低但確保輸入被當(dāng)作純文本處理是良好的防御習(xí)慣。escapeRegExp函數(shù)將這些特殊字符前面加上反斜線\進(jìn)行轉(zhuǎn)義使其失去特殊含義僅作為普通字符匹配。分割與重組使用split方法并利用正則的捕獲組()將文本分割成“非匹配部分-匹配部分-非匹配部分...”的數(shù)組。然后通過map遍歷匹配的部分用mark包裹不匹配的部分原樣輸出。整個過程沒有拼接 HTML 字符串全部由 React 管理虛擬 DOM從根本上杜絕了 XSS。React.Fragment對于非匹配的文本部分我們使用React.Fragment或簡寫來包裹它不會產(chǎn)生額外的 DOM 元素保持 HTML 結(jié)構(gòu)干凈。然后在ConversationList或具體的消息組件中使用它// MessageItem.tsx import React from react; import HighlightedText from ./HighlightedText; import { Message } from ../types; interface MessageItemProps { message: Message; highlightTerm?: string; } const MessageItem: React.FCMessageItemProps ({ message, highlightTerm }) { return ( div className{message-item ${message.role}} strong{message.role}:/strong div classNamemessage-content {/* 使用 HighlightedText 組件來安全渲染并高亮 */} HighlightedText text{message.content} highlight{highlightTerm} / /div /div ); };4.3 滾動到高亮位置進(jìn)階體驗如果搜索結(jié)果是長列表高亮雖然出現(xiàn)了但可能不在當(dāng)前視窗內(nèi)。一個更高級的體驗是在搜索后自動滾動到第一個高亮匹配項附近。// 在 ConversationSearch.tsx 或一個獨立邏輯中 import { useRef, useEffect } from react; // 使用 useRef 創(chuàng)建一個引用關(guān)聯(lián)到第一個匹配的消息項 // 假設(shè)我們在 MessageItem 組件中設(shè)置了 ref const firstHighlightedRef useRefHTMLDivElement(null); useEffect(() { if (searchTerm firstHighlightedRef.current) { // 使用 scrollIntoView 實現(xiàn)平滑滾動 firstHighlightedRef.current.scrollIntoView({ behavior: smooth, // 平滑滾動 block: center, // 盡可能將元素滾動到視口中央 }); } }, [searchTerm, filteredMessages]); // 當(dāng)搜索詞或過濾結(jié)果變化時觸發(fā) // 然后需要將 firstHighlightedRef 傳遞給第一個匹配的 MessageItem // 這需要稍微修改過濾邏輯標(biāo)記出第一個匹配項或者讓 MessageItem 自己判斷是否是第一個匹配項并設(shè)置 ref。 // 實現(xiàn)略復(fù)雜此處提供思路可以在過濾時給第一個匹配的 message 加一個標(biāo)記如 isFirstMatch: true // 然后在 MessageItem 中檢查這個標(biāo)記如果是 true則將其 div 的 ref 設(shè)置為 firstHighlightedRef。注意事項自動滾動是一個“強(qiáng)干預(yù)”的交互需要謹(jǐn)慎使用。如果用戶正在瀏覽突然的滾動會打斷他。更好的做法可能是提供一個“跳轉(zhuǎn)到下一個匹配項”的按鈕讓用戶自主控制。或者只在搜索詞剛剛發(fā)生變化從無到有或內(nèi)容大幅改變時觸發(fā)一次自動滾動后續(xù)輸入時不自動滾動。5. 常見問題、排查技巧與優(yōu)化實錄在實際開發(fā)和后續(xù)使用中我遇到了不少問題。這里記錄下最典型的幾個及其解決方案。5.1 代碼復(fù)制相關(guān)問題1復(fù)制的內(nèi)容多了換行或空格現(xiàn)象從網(wǎng)頁復(fù)制代碼到 IDE發(fā)現(xiàn)縮進(jìn)不對或者首尾多了空行。排查檢查getRawCodeText函數(shù)返回的字符串。在控制臺用console.log(JSON.stringify(rawText))打印JSON.stringify會將不可見字符如換行\(zhòng)n、制表符\t顯示出來方便查看首尾是否有\(zhòng)n。檢查pre和code標(biāo)簽的 CSS。white-space: pre-wrap;或pre標(biāo)簽?zāi)J(rèn)的空白處理可能會影響。確保復(fù)制的來源是純文本內(nèi)容而不是受 CSS 文本換行影響后的視覺內(nèi)容。解決確保復(fù)制源是代碼字符串本身。如果從 DOM 的textContent獲取可以考慮用.trim()去除首尾空白但要注意這會刪除代碼塊首行前的縮進(jìn)和末行的換行可能不符合預(yù)期。更精細(xì)的做法是只去除末尾多余的換行rawText.replace(/\n$/, )。問題2在 iframe 或某些瀏覽器中復(fù)制失敗現(xiàn)象navigator.clipboard.writeText拋出DOMException。原因Clipboard API 需要“安全上下文”Secure Context即 HTTPS 或localhost。此外在某些沙盒環(huán)境如某些 iframe 配置下或用戶禁用了權(quán)限API 會不可用。解決降級方案實現(xiàn)一個copyFallback函數(shù)。const copyFallback (text: string) { const textArea document.createElement(textarea); textArea.value text; textArea.style.position fixed; textArea.style.opacity 0; document.body.appendChild(textArea); textArea.select(); try { const successful document.execCommand(copy); if (successful) { message.success(已復(fù)制兼容模式); } else { throw new Error(execCommand failed); } } catch (err) { console.error(降級復(fù)制失敗:, err); message.error(復(fù)制失敗請手動選擇文本復(fù)制); } finally { document.body.removeChild(textArea); } };在主函數(shù)的catch塊中調(diào)用此降級函數(shù)。權(quán)限提示如果是 HTTPS 環(huán)境仍失敗可能是用戶阻止了剪貼板權(quán)限。可以引導(dǎo)用戶檢查瀏覽器地址欄的權(quán)限設(shè)置。5.2 會話搜索相關(guān)問題1搜索性能隨著消息增多變慢現(xiàn)象當(dāng)allMessages有幾千條時輸入搜索詞會感覺到明顯的輸入延遲。排查使用瀏覽器的性能分析工具如 Chrome DevTools 的 Performance 面板錄制輸入時的性能查看useMemo中的過濾函數(shù)是否成了瓶頸。解決防抖為搜索輸入框添加防抖debounce例如用戶停止輸入 300 毫秒后再觸發(fā)過濾計算。這能有效減少不必要的計算。import { debounce } from lodash; // 或自己實現(xiàn)一個簡單的防抖函數(shù) const debouncedSearch useMemo( () debounce((value: string) setSearchTerm(value), 300), [] ); // 在 onChange 中調(diào)用 debouncedSearch(e.target.value)虛擬列表如果過濾后的列表仍然很長渲染大量 DOM 節(jié)點也會導(dǎo)致卡頓?？紤]使用虛擬列表庫如react-window或react-virtualized只渲染可視區(qū)域內(nèi)的項目。后端搜索當(dāng)數(shù)據(jù)量真的非常大時前端過濾不再是可行方案。必須將搜索邏輯移到后端前端通過 API 分頁獲取搜索結(jié)果。問題2高亮匹配了不該匹配的內(nèi)容現(xiàn)象例如搜索“js”結(jié)果把“JSON”里的“js”也高亮了但用戶可能只想找獨立的“js”單詞。原因我們使用的是簡單的includes或split這是子字符串匹配。解決如果需要更精確的“全詞匹配”可以使用正則表達(dá)式的單詞邊界\b。修改過濾和高亮邏輯// 過濾邏輯中使用正則測試 const regex new RegExp(\\b${escapeRegExp(term)}\\b, i); // \b 表示單詞邊界i 表示不區(qū)分大小寫 return allMessages.filter(message regex.test(message.content)); // 高亮邏輯中也使用類似的正則進(jìn)行分割 const parts text.split(new RegExp((\\b${escapeRegExp(highlight)}\\b), gi));注意escapeRegExp仍然至關(guān)重要因為highlight可能包含破壞\b邊界的字符。問題3搜索中文或特殊字符有問題現(xiàn)象搜索英文正常但搜索中文詞語時匹配不上或高亮錯位。原因JavaScript 的\b單詞邊界定義基于“單詞字符”\w即[A-Za-z0-9_]不包括中文字符。因此\b中\(zhòng)b無法正確匹配中文。解決對于需要支持中文等非拉丁語系的語言更健壯的做法是使用更復(fù)雜的 Unicode 屬性或分詞庫但這會大大增加復(fù)雜度。對于大多數(shù)應(yīng)用簡單的子字符串匹配includes可能已經(jīng)足夠。如果確實需要可以尋找專門的前端分詞庫或者考慮在后端進(jìn)行更強(qiáng)大的全文檢索如使用 Elasticsearch, MeiliSearch 等。5.3 樣式與交互優(yōu)化復(fù)制按鈕的視覺反饋除了文字和圖標(biāo)變化可以添加輕微的動畫比如一個“打勾”的動畫或背景色漸變讓反饋更柔和。CSS Transition 可以輕松實現(xiàn)。搜索框的加載狀態(tài)如果未來切換到后端搜索搜索會有網(wǎng)絡(luò)延遲。此時在輸入框旁邊顯示一個加載中的 spinner并禁用輸入框能有效管理用戶預(yù)期?？諣顟B(tài)處理當(dāng)搜索結(jié)果為零時不要只顯示一個空列表。應(yīng)該有一個友好的提示比如“沒有找到包含‘XXX’的會話”并可能提供一個清除搜索的按鈕。鍵盤快捷鍵考慮添加鍵盤快捷鍵提升效率。例如聚焦在搜索框時按Esc清除內(nèi)容在代碼塊上懸停時按CtrlC/CmdC觸發(fā)復(fù)制需謹(jǐn)慎避免與瀏覽器快捷鍵沖突。實現(xiàn)“代碼塊復(fù)制”和“會話搜索”這兩個功能是一個從理解用戶痛點到設(shè)計技術(shù)方案再到處理無數(shù)邊界情況的完整過程。它讓我再次體會到一個看似簡單的功能背后藏著對細(xì)節(jié)的考量和對用戶體驗的執(zhí)著。尤其是安全方面一個escapeRegExp的疏忽就可能導(dǎo)致腳本注入漏洞這提醒我們前端開發(fā)中安全永遠(yuǎn)是第一位的。最后分享一個小心得在實現(xiàn)這類功能時盡早并頻繁地在真實場景中測試。把你的文章丟進(jìn)去搜一搜把各種奇怪的代碼片段復(fù)制粘貼一下你總能發(fā)現(xiàn)一些設(shè)計時沒想到的角落情況。這些發(fā)現(xiàn)才是讓功能從“能用”變得“好用”的關(guān)鍵。