?

使用v-html渲染，寫一個高亮方法

<span class="title-name" v-html="highlightKeywords(name, keywords)"></span>

?這里傳入的name帶了文件拓展名，所以先把名稱從文件名里提取出來

// 高亮標題顏色highlightKeywords(name, keywords) {// 安全處理空值if (!name || typeof name !== 'string') return '';// 正則解釋：// .*? 非貪婪匹配任意字符（盡可能少匹配）// (?=\.[^.]+$) 正向肯定預查：匹配后面緊跟著"點+擴展名"的位置const match = name.match(/.*?(?=\.[^.]+$)/);// 如果有匹配結果則返回，否則返回原名稱（無擴展名的情況）const title = match ? match[0] : name;// console.log(title, '--title--')// console.log(match, '--match--')// 統一處理：將單個關鍵詞轉為數組，方便統一邏輯const keywordList = Array.isArray(keywords) ? keywords : [keywords];// 過濾空關鍵詞const validKeywords = keywordList.filter(k => k && k.trim() !== '');if (validKeywords.length === 0) return title;// 構建正則表達式：匹配所有關鍵詞（不區分大小寫）// 轉義特殊字符，避免正則語法錯誤const escapedKeywords = validKeywords.map(k => k.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') // 轉義正則特殊字符);const regex = new RegExp(`(${escapedKeywords.join('|')})`, 'gi');// 替換匹配到的關鍵詞，添加高亮樣式return title.replace(regex, (match) => {return `<span style="color: blue">${match}</span>`;});},