文章转自个人博客：https://knightyun.github.io/2019/03/04/articles-search，转载请申明
现在很多网站页面里都有搜索模块，包括在线搜索、站内搜索等等，尤其是博客类网站，文章搜索功能就显得比较重要，现在以个人博客网站为例，详细介绍如何给页面添加搜索功能模块，至于如何搭建个人博客网站，可以参考这篇文章：https://knightyun.github.io/2018/04/01/github-pages-blog；
功能分析
为网页添加搜索模块的第三方网站有不少，实现效果也都不错，既然人家都能通过代码实现此功能，与其过度依赖第三方，何不自己研究一下原理自己实现呢*_*；
网页内搜索功能无非就是在文本输入框内输入一串想要搜索的关键字符串，点击搜索按钮后查找匹配出站内所有文章的匹配结果进行输出，再附上一个文章的链接；针对这个功能，作者本人第一时间想到的则是前端领域里的 Ajax，利用 XMLHttpRequest() 实现数据的交互，不清楚的可以自行百度快速补习，然后一般博客类网站都有 RSS 订阅功能及其数据页面，不清楚的也可以迅速百度了解一下，其实就是站内某个目录内存在一个叫 feed.xml 或者类似名字的页面，XML格式的，早期用于实现新闻内容订阅的，现在用的也比较广泛，里面存储的就是文章相关的一些数据，因此我们就可以获取这个文件里面的所有内容然后实现搜索匹配；
当然有其他更好的实现方法可以自行参考或者在文末评论，那么接下来便通过这个方法来一步步实现搜素功能；
功能实现
或者在这里：https://knightyun.github.io/ 预览我的博客的搜索模块的最终实现；
HTML部分
即页面样式，组成很简单，即一个文本输入框和一个搜索图标，这里图标可以自行搜索下载一个，或者像下面一样使用在线图标，全部代码如下：
先在内部添加以下代码，使用在线图标：
然后在网页内需要添加搜索栏的合适位置添加以下代码，一般放在顶部导航栏：
上面的clear是一个清除输入框内容的图标，search-results是用于输出匹配到的结果的板块；
CSS部分
然后来看一下CSS样式代码，仅供参考：
样式可以自行随意调整，最终感觉好看就OK；
JavaScript部分
接下来就是重头戏了，也是实现搜索功能的核心部分，搜索逻辑的实现；
再来大致分析一下逻辑，和实现的思路：
- 利用XMLHttpRequest()获取站内feed.xml内的所有数据，保存到一个XML DOM对象中；
- 将XML对象中的文章标题、链接、内容、索引等通过等方法获取并保存到对应数组变量中；
- 用户在输入框输入查找内容，提交后内容保存到一个字符串类型变量中；
- 遍历保存文章内容的数组，通过等方法和输入值进行匹配；
- 匹配成功后得到所有匹配成功的数组元素的索引值，该索引值也是该内容的标题、链接数组对应的索引值；
- 将最终搜集的文章标题、链接，以及匹配到的内容片段摘取输出到页面；
这里附上最终的 js 实现代码与注释：
可以把上面的代码保存到这样的 js 文件中，然后引入到 html 页面里；