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、优快云、Bootstrap、JQery等开源网站、工具。

参考

[1] Bruce_wjh的优快云博客：《JavaScript读取本地文件》
[2] bootstrap官网
[3] jquery官网
[4] github官网
[5] 优快云官网