Javascript實現博客全文搜索功能

摘要

搜索是一個在購物網站、論文檢索網站、社交網站等相關網站中被廣泛使用的功能。爲了不借助後臺代碼實現本人博客的搜索功能，本文使用Javascript代碼對其進行簡單實現。該搜索功能的亮點包括：使用純前端代碼實現搜索功能；對所有的博客建立索引文件，提高檢索博客的效率；實現方法簡單、操作簡便、代碼可擴展性強；支持絕大多數瀏覽器，電腦端和移動端界面和功能基本保持一致。通過在電腦端和移動端測試，基本達到預期目標，僅非搜索模塊的推薦視圖界面存在小問題。

Javascript實現搜索功能

• 下面代碼實現了讀取本地文本文件內容的功能。調用該函數並將待讀取的本地文件路徑以字符串的形式傳入，即可獲取到文本文件的內容。例如：let testContent = readfile("files/test.txt")。

// 讀文件內容
function readfile(filepath) {
      let xhr = new XMLHttpRequest(),
          okStatus = document.location.protocol === "file:" ? 0 : 200;
      xhr.open('GET', filepath, false);
      xhr.overrideMimeType("text/html;charset=utf-8");//默認爲utf-8
      xhr.send(null);
      return xhr.status === okStatus ? xhr.responseText : null;
  }

• 查詢功能被封裝在下面的代碼中。將該代碼嵌入到對應的控件的對應事件中即可運行搜索功能，例如<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" id="inputSearch" oninput="query(this)">是本文輸入框的oninput調用搜索功能。

function query(object) {
    let showView = document.getElementById("showView");
    showView.innerHTML = "";

    let text = readfile("asset/index/search_index.txt");
    let keywords = object.value.trim();
    let allLines = text.split("\n");
    for (let index in allLines) {
        let titleAndContent = allLines[index].split("    ");
        if (titleAndContent[0].toLowerCase().indexOf(keywords.toLowerCase()) > -1) {  // 博客標題中包含關鍵字的處理
            let rootDiv = document.createElement("div");
            rootDiv.className = "card-header bg-white";
            let titleStr = "<a href=\"blogs/"+ titleAndContent[0] + "\" class=\"text-dark\">" +
                titleAndContent[0].replace('.html', '').replace(new RegExp(keywords , 'gi'), "<span style=\"color:red;\">" + keywords + "</span>") + "</a>";
            rootDiv.innerHTML = "<div class=\"card text-dark bg-white\">\n" +
                "                <div class=\"card-header bg-white\">" + titleStr + "</div>\n" +
                "                <div class=\"card-body\">\n" +
                "                    <p class=\"card-text\">" + titleAndContent[1].split("  ")[0] + "</p>\n" +
                "                    <a href=\"blogs/" + titleAndContent[0] + "\" class=\"btn btn-primary float-md-right\">閱讀全文</a>\n" +
                "                </div>\n" +
                "            </div>";

            showView.appendChild(rootDiv);

        } else {
            let content = titleAndContent[1].split("  ");
            for (let i in content) {
                if (content[i].toLowerCase().indexOf(keywords.toLowerCase()) > -1) {
                    let rootDiv = document.createElement("div");
                    rootDiv.className = "card-header bg-white";
                    let titleStr = "<a href=\"blogs/"+ titleAndContent[0] + "\" class=\"text-dark\">" + titleAndContent[0].replace('.html', '') + "</a>";
                    rootDiv.innerHTML = "<div class=\"card text-dark bg-white\">\n" +
                        "                <div class=\"card-header bg-white\">" + titleStr + "</div>\n" +
                        "                <div class=\"card-body\">\n" +
                        "                    <p class=\"card-text\">" + content[i].replace(new RegExp(keywords , 'gi'), "<span style=\"color:red;\">" + keywords + "</span>") + "</p>\n" +
                        "                    <a href=\"blogs/" + titleAndContent[0] + "\" class=\"btn btn-primary float-md-right\">閱讀全文</a>\n" +
                        "                </div>\n" +
                        "            </div>";

                    showView.appendChild(rootDiv);
                    break;
                }
            }
        }
    }
    showView.style.visibility = "visible";

    // 如果搜索輸入框中的關鍵字爲空或者不匹配博客內容，則將搜索界面隱藏。
    if (object.value.trim() === "" || showView.innerHTML === "") {
        showView.style.visibility = "hidden";
    }

}

本文的實現原理大致是這樣的：html中定義一個div用來封裝搜索界面，一開始將該div隱藏，然後調用查詢功能。查詢功能將搜索到結果定義到一個子div中，然後使用DOM將其添加到html中的div，並實時顯示搜索結果。完整的代碼，可以查看該網址https://github.com/Longweibing/Longweibing.github.io

搜索功能的亮點是用到了索引，主要思路是：爲博客建立一個索引，建立索引既可以提高搜索效率，有可以方面管理搜索內容。具體的索引文件爲博客的標題和需要檢索的內容，每個博客的所有內容分配到一行裏。標籤與檢索內容、檢索內容內部分別用四個空格和兩個空格隔開，方便格式化操作。使用Javascript讀取索引文件，從而查詢到具體內容。當博客數量較多時，可以分類別創建不同的索引文件，因此搜索模塊的擴展性較強。

測試結果

• 下圖爲電腦端測試搜索功能
  
• 下圖爲移動端測試搜索功能
  

總結與展望

本文使用純前端代碼實現了博客的搜索功能。不僅介紹了搜索的相關工作，而且細緻介紹了代碼細節和實現原理。通過在電腦端和移動端測試，落實了搜索功能實現情況。我不是一個專業的前端技術專家，僅僅出於個人興趣來實現博客的搜索功能，因此代碼中存在很多不規範、不合理的部分，希望各位官老爺多多理解和提出寶貴意見。本文行文大致遵循了論文格式，這樣可以使文章儘量嚴謹，也使讀者更容易、更全面理解本文。

致謝

感謝相關博主提供的有效、可行的代碼片段和相關功能講解。感謝開源社區、組織提高的高效工具。感謝Github、CSDN、Bootstrap、JQery等開源網站、工具。

參考

[1] Bruce_wjh的CSDN博客：《JavaScript讀取本地文件》
[2] bootstrap官網
[3] jquery官網
[4] github官網
[5] CSDN官網