對文章進行搜索關鍵字過濾，并顯示高亮的javascript實現方法之一

AlienZHOU 發布于2019-08-23 14:09 / 1521人閱讀

摘要：本篇文章主要用來記載工作項目中遇到的，本人覺得有必要記下來的知識點，方便在以后遇到時可以直接使用，也給遇到同樣問題的其他人提供一個思路。

在不考慮關鍵字是特殊字符的情況下：

warpTag (content, keyword, tagName) {
      if (content === "No results") {
        return content
      }
      const a = content.toLowerCase()
      const b = keyword.toLowerCase()
      const indexof = a.indexOf(b)
      const c = indexof > -1 ? content.substr(a.indexOf(b), keyword.length) : ""
      const val = `<${tagName}>${c}`
      const regS = new RegExp(keyword, "gi")
      return content.replace(regS, val)
    }

調用的時候warpTag("要檢索的內容","檢索的關鍵字","給內容中的關鍵字加上的有特殊標記的標簽名")

2.如果關鍵字允許是特殊字符的情況下，就要做區別處理，因為有些特殊字符在正則中有特殊含義（例如：^*+?等，具體可參考正則表達式手冊）：

warpTag (content, keyword, tagName) {
    if (content === "") {
      return content
    }
    const a = content.toLowerCase()
    const b = keyword.toLowerCase()
    const indexof = a.indexOf(b)
    const c = indexof > -1 ? content.substr(a.indexOf(b), keyword.length) : ""
    const val = `<${tagName} class="keywords">${c}`
    let characterReg = /^.*[!~@#$%^&*(_)+-=`,./<>?;":"|[]{}].*$/
    let regS
    if (characterReg.test(keyword)) {
      if (keyword.length === 1) {
        regS = new RegExp("" + keyword, "gi")
      } else {
        let keywordNew = ""
        for (let i = 0; i < keyword.length; i++) {
          keywordNew += i < keyword.length - 1 ? keyword.substr(i, 1) + "" : keyword.substr(i, 1)
        }
        keyword = keywordNew
      }
      regS = new RegExp("" + keyword, "gi")
    } else {
      regS = new RegExp(keyword, "gi")
    }
    return content.replace(regS, val)
  }

使用方法同上：warpTag("要檢索的內容","檢索的關鍵字","給內容中的關鍵字加上的有特殊標記的標簽名")。
本篇文章主要用來記載工作項目中遇到的，本人覺得有必要記下來的知識點，方便在以后遇到時可以直接使用，也給遇到同樣問題的其他人提供一個思路。

云服務器 GPU云服務器 javascript實現方法關鍵詞高亮對騰訊云的服務器進行界面操作系統欄目高亮顯示

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100169.html

對文章進行搜索關鍵字過濾，并顯示高亮的javascript實現方法之一

摘要：本篇文章主要用來記載工作項目中遇到的，本人覺得有必要記下來的知識點，方便在以后遇到時可以直接使用，也給遇到同樣問題的其他人提供一個思路。在不考慮關鍵字是特殊字符的情況下： warpTag (content, keyword, tagName) { if (content === No results) { return content } ...

劉厚水 2019-08-02 13:54 評論0 收藏0
實現DataTables搜索框查詢結果高亮顯示

摘要：宋體三搜索框查詢結果高亮顯示的其他方法宋體。宋體四總結宋體實現搜索框查詢結果高亮顯示的功能需要引入文件，文中提供了種這類文件，并說明了要配套編寫的相關代碼。DataTables是封裝好的HTML表格插件，豐富了HTML表格的樣式，提供了即時搜索、分頁等多種表格高級功能。用戶可以編寫很少的代碼（甚至只是使用官方的示例代碼），做出一個漂亮的表格以展示數據。關于DataTables的更多信息，請查...

番茄西紅柿 2019-04-23 13:17 評論0 收藏0
一個前端開發工程師的Vim跟IDE一樣

摘要：一組就是一個插件，的很多功能都由各式插件實現。與相反到行頭到本行的第一個非字符到行尾到本行最后一個不是字符的位置。到逗號前的第一個字符。在當前行查找第三個出現的。工程文件菜單自定義快捷鍵顯示文件菜單自帶快捷鍵顯示隱藏隱藏文件在新這里是我新配置出來的 jaywcjlove/vim-web 一直在打磨中，基本上可以用了。拿出來騙 star 先上圖 showImg(https://segm...

Vultr 2019-06-28 10:19 評論0 收藏0
Jerry和您聊聊Chrome開發者工具

摘要：開發者工具是日常工作使用的三大調試器之一。當然我可以在開發者工具的標簽頁手動選中響應內容，然后，再到本地新建一個文件，。注開發者工具顏色的修改希望這篇文章能讓您對開發者工具有一些更深入的了解，感謝閱讀。 Chrome開發者工具是Jerry日常工作使用的三大調試器之一。雖然工具名稱前面帶了個開發者, 但是它對非開發人員仍然有用。不信？用Chrome打開我們常用的網站，按F12，在Con...

Donald 2019-08-15 15:31 評論0 收藏0