快捷導(dǎo)航

Vue實現(xiàn)多個關(guān)鍵詞高亮顯示功能

更新時間：2024年12月27日 09:26:03 作者：婷婷婷婷

在現(xiàn)代網(wǎng)頁開發(fā)中,常常需要實現(xiàn)高亮顯示關(guān)鍵詞的功能,這篇文章將探討如何通過?Vue.js?中的?highlightText來實現(xiàn)這一功能,感興趣的可以了解下

在現(xiàn)代網(wǎng)頁開發(fā)中，常常需要實現(xiàn)高亮顯示關(guān)鍵詞的功能。例如，在一個搜索結(jié)果頁面，用戶可能輸入某個關(guān)鍵詞，并希望看到該關(guān)鍵詞在相關(guān)內(nèi)容中的高亮顯示。下面我們將探討如何通過 JavaScript 來實現(xiàn)這一功能，具體以 Vue.js 中的 highlightText 方法為例。

1. 理解 escapeRegExp 方法

escapeRegExp 是一個將特殊字符轉(zhuǎn)義為正則表達(dá)式安全字符的函數(shù)。正則表達(dá)式中有許多特殊字符，例如 .、*、+ 等，這些字符在正則中有特定的含義。如果我們希望這些字符作為普通字符進(jìn)行匹配，就需要對它們進(jìn)行轉(zhuǎn)義。

escapeRegExp(str) {
    return str.replace(/([.*+?^=!:${}()|[]/\])/g, '\$1');
}

此方法使用了正則表達(dá)式，將輸入字符串中的特殊字符（如 *、+、? 等）替換為它們的轉(zhuǎn)義字符（如 *、+、?）。這確保了我們可以在正則表達(dá)式中安全地使用用戶輸入的任何字符串，無論其是否包含特殊字符。

2. 高亮顯示文本的核心方法

highlightText 方法的核心作用是根據(jù)用戶輸入的關(guān)鍵詞在文本中查找并高亮顯示匹配項。它使用了前面提到的 escapeRegExp 方法來確保每個關(guān)鍵詞都被正確轉(zhuǎn)義，然后利用正則表達(dá)式實現(xiàn)高亮功能。

highlightText(fieldValue) {
    const keyword = this.queryParams.keyword || '';
    if (!keyword) return fieldValue;

    const keywords = keyword.split('');
    if (keywords.length === 0 || !fieldValue) return fieldValue;

    const regexString = keywords.map(keyword => `(${this.escapeRegExp(keyword)})`).join('|');
    const regex = new RegExp(regexString, 'gi');

    return fieldValue.replace(regex, (match) => {
        return `<span class="highlight">${match}</span>`;
    });
}

代碼解析：

獲取關(guān)鍵詞：首先從 queryParams 中獲取用戶輸入的關(guān)鍵詞（this.queryParams.keyword）。如果沒有輸入關(guān)鍵詞，則直接返回原始文本。

拆分關(guān)鍵詞：將輸入的關(guān)鍵詞按字符拆分成數(shù)組。如果拆分后的數(shù)組為空或 fieldValue 本身為空，直接返回原始文本。

生成正則表達(dá)式：使用 map 方法將每個字符轉(zhuǎn)義，并將所有轉(zhuǎn)義后的字符拼接成一個大的正則表達(dá)式字符串。這里使用了 | 來分隔每個字符，表示“或”操作，即如果文本中出現(xiàn)任何一個關(guān)鍵詞字符，都會被匹配。

正則替換：通過 replace 方法，使用 span 標(biāo)簽包裹所有匹配的字符，以實現(xiàn)高亮顯示。'gi' 標(biāo)志表示全局匹配且不區(qū)分大小寫。

返回高亮后的文本：將高亮后的文本作為 HTML 返回，可以直接插入到頁面中。

3. 如何使用 highlightText

假設(shè)我們有一個 Vue.js 組件，它展示了一段文本，并希望在文本中高亮顯示用戶輸入的關(guān)鍵詞?？梢赃@樣調(diào)用 highlightText 方法：

<template>
  <div v-html="highlightText('這是一個測試文本，測試關(guān)鍵字高亮顯示')"></div>
</template>

<script>
export default {
  data() {
    return {
      queryParams: {
        keyword: '測試'
      }
    };
  },
  methods: {
    escapeRegExp(str) {
      return str.replace(/([.*+?^=!:${}()|[]/\])/g, '\$1');
    },
    highlightText(fieldValue) {
      const keyword = this.queryParams.keyword || '';
      if (!keyword) return fieldValue;
      const keywords = keyword.split('');
      if (keywords.length === 0 || !fieldValue) return fieldValue;
      const regexString = keywords.map(keyword => `(${this.escapeRegExp(keyword)})`).join('|');
      const regex = new RegExp(regexString, 'gi');
      return fieldValue.replace(regex, (match) => {
        return `<span class="highlight">${match}</span>`;
      });
    }
  }
};
</script>

<style scoped>
.highlight {
  background-color: yellow;
}
</style>

在這個示例中，我們通過 v-html 指令將高亮后的文本渲染到頁面中，并通過 CSS 設(shè)置高亮的背景顏色。用戶輸入的關(guān)鍵詞 測試 會在文本中被高亮顯示。