輕量級Javascript全文搜索庫-Lunr.js

紹

Lunr.js是個用于瀏覽器的輕量級 JavaScript 全文搜索引擎。它為JSON文檔建立索引，并提供一個簡單的搜索界面來檢索與文本查詢最匹配的文檔對于一些小型的博客、開發者文檔或 Wiki 網站來說,完全可以通過它實現站內離線搜索:

為什么使用它？

對于已經將所有數據存儲在客戶端中的Web應用程序，也能夠在客戶端上搜索該數據也是很有意義的。這樣可以節省在服務器上添加額外的壓縮服務。本地搜索索引將更快，沒有網絡開銷，并且即使沒有網絡連接也將保持可用。

Github

目前Github上star數6.6k

https://github.com/olivernn/lunr.js

簡單示例

var idx = lunr(function () {
  this.field('title')
  this.field('body')

  this.add({
    "title": "Twelfth-Night",
    "body": "If music be the food of love, play on: Give me excess of it…",
    "author": "William Shakespeare",
    "id": "1"
  })
})

然后再像下面這樣

idx.search("love")

這將返回一個匹配文檔列表，其中包含與搜索查詢的匹配程度以及與該匹配相關的任何關聯元數據的分數：

[
  {
    "ref": "1",
    "score": 0.3535533905932737,
    "matchData": {
      "metadata": {
        "love": {
          "body": {}
        }
      }
    }
  }
]

安裝

只需在要使用它的頁面中包含lunr.js源文件。所有現代瀏覽器均支持Lunr.js。

npm install lunr

特性

（翻譯或不夠準確）

全文搜索支持14種語言
在查詢時提升術語或在索引時提升整個文檔
范圍搜索到特定字段
模糊術語與通配符匹配或編輯距離

總結

在之前的文章中介紹過另一個全文搜索庫FlexSearch.js，感興趣的小伙伴也可以去看一看介紹，在這里也提前祝大家新年快樂，萬事如意，身體健康！

eautiful Soup 搜索文檔

html_doc = """
<html><head><title>index</title></head>
<body>
<p class="title"><b>首頁</b></p>
<p class="main">我常用的網站
<a href="https://www.google.com" class="website" id="google">Google</a>
<a href="https://www.baidu.com" class="website" id="baidu">Baidu</a>
<a href="https://cn.bing.com" class="website" id="bing">Bing</a>
</p>
<div><!--這是注釋內容--></div>
<p class="content1">...</p>
<p class="content2">...</p>
</body>
"""
soup = BeautifulSoup(html_doc, "lxml")

過濾器

正式講解搜索文檔之前，我們有必要了解下 Beautiful Soup 的過濾器，這些過濾器在整個搜索的 API 中都有所體現，他們可以被用在 TAG 的 name 中，屬性中，字符串中或他們的混合中。聽起來有點繞是么，看幾個例子就懂了。

1、根據 TAG 的 name 來查找標簽，下面的例子會查找文檔中的所有 b 標簽。同時要注意統一傳入 Unicode 編碼以避免 Beautiful Soup 解析編碼出錯。

# demo 1
tags = soup.find_all('b')
print(tags)

#輸出結果
[<b>首頁</b>]

2、如果傳入正則表達式作為參數，那么 Beautiful Soup 會通過正則表達式的 match() 來匹配內容。

# demo 2
import re
for tag in soup.find_all(re.compile("^b")):
    print(tag.name)

#輸出結果
body
b

3、如果傳入列表參數，那么 Beautiful Soup 會將與列表中任意一個元素匹配的內容返回。

# demo 3
for tag in soup.find_all(['a', 'b']):
    print(tag)

#輸出結果
<b>首頁</b>
<a class="website" href="https://www.google.com" id="google">Google</a>
<a class="website" href="https://www.baidu.com" id="baidu">Baidu</a>
<a class="website" href="https://cn.bing.com" id="bing">Bing</a>

4、True 可以匹配任何值，下面的例子是查找所有的 TAG 但不會返回字符串。

# demo 4
for tag in soup.find_all(True):
    print(tag.name, end=', ')
 
#輸出結果
html, head, title, body, p, b, p, a, a, a, div, p, p,

5、方法。我們可以定義一個方法，該方法只接受一個參數，若該方法返回 True 則表示當前元素匹配并且被找到，返回 False 意味著沒找到。下面的例子展示了查找所有同時包含 class 屬性和 id 屬性的節點。

# demo 5
def has_id_class(tag):
    return tag.has_attr('id') and tag.has_attr('class')

tags = soup.find_all(has_id_class)
for tag in tags:
	print(tag)
	
#輸出結果
<a class="website" href="https://www.google.com" id="google">Google</a>
<a class="website" href="https://www.baidu.com" id="baidu">Baidu</a>
<a class="website" href="https://cn.bing.com" id="bing">Bing</a>

大部分情況字符串過濾器就可以滿足我們的需求，外加這個神奇的方法過濾器，我們就可以實現各種自定義需求了。

find_all() 函數

該函數搜索當前節點下的所有子節點，其簽名如下find_all( name , attrs , recursive , text , **kwargs )。我們可以傳入指定 TAG 的 name 來查找節點，上面已經舉過例子了，這里不再贅述。我們來看幾個其他的用法。

1、如果我們轉入 find_all() 函數不是搜索內置的參數名，那么搜索是就會將該參數對應到屬性上去。下文的例子表示查找 id 為 google 的節點。

搜索指定名字的屬性時可以使用的參數值包括：字符串，正則表達式，列表，True。也就是我們上文介紹過的過濾器。

# demo 6
tags = soup.find_all(id='google')
print(tags[0]['href'])

for tag in soup.find_all(id=True): # 查找所有包含 id 屬性的 TAG
	print(tag['href'])

#輸出結果
https://www.google.com
https://www.google.com
https://www.baidu.com
https://cn.bing.com

2、按照 CSS 類名搜索，但是鏢師 CSS 的關鍵字 class 在 Python 中是內置關鍵字，從 Beautiful Soup 4.1.1 版本開始，可以通過 class_ 參數搜索有指定 CSS 類名的 TAG：

class_ 參數同樣接受不同類型的過濾器：字符串，正則表達式，方法，True。

# demo 7
tags = soup.find_all("a", class_="website")
for tag in tags:
	print(tag['href'])

def has_seven_characters(css_class):
    return css_class is not None and len(css_class) == 7

for tag in soup.find_all(class_=has_seven_characters):
	print(tag['id'])

#輸出結果
https://www.google.com
https://www.baidu.com
https://cn.bing.com
google
baidu
bing

同時，因為 CSS 可以有多個值，所以我們可以分別搜索 CSS 中的每個值。

# demo 8
css_soup = BeautifulSoup('<p class="body strikeout"></p>', 'lxml')
tags = css_soup.find_all("p", class_="strikeout")
print(tags)

#輸出結果
[<p class="body strikeout"></p>]

3、不僅可以按照標簽和 CSS 來搜索整個文檔，還可以使用 text 再按照內容來搜索。同時 text 還可以配合其他屬性一起來完成搜索任務。

# demo 9
tags = soup.find_all(text="Google")
print("google : ", tags)

tags = soup.find_all(text=["Baidu", "Bing"])
print("baidu & bing : ", tags)

tags = soup.find_all('a', text="Google")
print("a[text=google] : ", tags)

#輸出結果
google :  ['Google']
baidu & bing :  ['Baidu', 'Bing']
a[text=google] :  [<a class="website" href="https://www.google.com" id="google">Google</a>]

4、限制返回數量

有時候文檔樹過于龐大，我們不想查查找整棵樹，只想查找指定數量的節點，或者只想查找子節點，而不想查找孫子節點，指定 limit 或者 recursive 參數即可。

# demo 10
tag = soup.find_all("a", limit=1)
print(tag)

tags = soup.find_all("p", recursive=False)
print(tags)

#輸出結果
[<a class="website" href="https://www.google.com" id="google">Google</a>]
[]

因為該對象的兒子節點沒有 p 標簽，所以返回的是空列表。

find() 函數

該函數只會返回一個結果，與 find_all(some_args, limit=1) 是等價的，唯一的區別就是該函數直接返回結果，而 find_all() 函數返回包含一個結果的列表。另外 find_all() 方法沒有找到目標是返回空列表, find() 方法找不到目標時,返回 None。除此之外使用上沒有其他差別。

其他函數

除了 find_all() 和 find() 外，Beautiful Soup 中還有 10 個用于搜索的 API，其中中五個用的是與 find_all() 相同的搜索參數，另外 5 個與 find() 方法的搜索參數類似，區別僅是它們搜索文檔的范圍不同。

find_parents() 和 find_parent() 用來搜索當前節點的父節點。

find_next_siblings() 和 find_next_sibling() 對在當前節點后面解析的所有兄弟節點進行迭代。

find_previous_siblings() 和 find_previous_sibling() 對在當前節點前面解析的所有兄弟節點進行迭代。

find_all_next() 和 find_next() 對當前節點之后的 TAG 和字符串進行迭代。

find_all_previous() 和 find_previous() 對當前節點之前的 TAG 和字符串進行迭代。

以上五組函數的區別僅僅是前者返回一個所有符合搜索條件的節點列表，而后者只返回第一個符合搜索條件的節點。

因為這 10 個 API 的使用和 find_all() 與 find() 大同小異，所有i這里不再舉例，讀者可以自己探索。

CSS 選擇器

在 Tag 或 BeautifulSoup 對象的 .select() 方法中傳入字符串參數即可使用 CSS 選擇器的語法找到 TAG。

1、通過某個標簽逐層查找。

# demo 11
tags = soup.select("body a")
for tag in tags:
	print(tag['href'])

#輸出結果
https://www.google.com
https://www.baidu.com
https://cn.bing.com

2、查找某個標簽下的直接子標簽

# demo 12
tags = soup.select("p > a")
print(tags)

tags = soup.select("p > #google")
print(tags)

#輸出結果
[<a class="website" href="https://www.google.com" id="google">Google</a>, <a class="website" href="https://www.baidu.com" id="baidu">Baidu</a>, <a class="website" href="https://cn.bing.com" id="bing">Bing</a>]
[<a class="website" href="https://www.google.com" id="google">Google</a>]

3、通過 CSS 類名直接查找

# demo 13
tags = soup.select(".website")
for tag in tags:
	print(tag.string)

#輸出結果
Google
Baidu
Bing

4、通過標簽的 id 屬性查找

# demo 14
tags = soup.select("#google")
print(tags)

#輸出結果
[<a class="website" href="https://www.google.com" id="google">Google</a>]

5、通過屬性的值來查找

擊查看效果動圖

javascript企業級特效群內分享：原生JavaScript實現移動端百度圖片搜索

知識點：移動端適配,跨域jsonp處理,

原生javascript封裝jsonp,ajax與跨域原理講解,

圖片等比縮放算法, 瀑布流實現原理講解,

百度圖片內部請求入口.JavaScript編程原理與事務處理思考

PS：javascript不是做幾個特效就可以說學會了的，做簡單特效其實只是javascript的一個最簡單的運用，群內很多伙伴都說現在找工作找不到，什么都學了，連面試機會都沒有，這不是所謂的前端需求滿了，而是很多伙伴學的并不扎實，很多基礎的東西都沒有學好，作為很多框架和插件的基礎，原生javascript一定是非常重要的，這次分享，就是做了一個對原生javascript稍微深層次的利用，有什么不懂得或者不足的，歡迎指正！附上完整源碼/視頻以及注釋！

如果想要更多的企業求職加分項目，案例，可以來一下我的前端群216634437，每天都會精挑細選一個特效，項目出來詳細講解，分享！

HTML/javascript移動端百度圖片搜索源碼：

需要文檔版源碼來我的前端群216634437，已上傳到群文件

移動端javascript百度圖片搜索視頻：原生JavaScript實現移動端百度圖片搜索

頭條號里有許多web前端學習視頻，企業常用特效/案例/項目，敬請關注！

下期群內分享：

想思路思路思路！！！！

在線咨詢

上一篇：水平滑動選擇框實現示例
下一篇：JavaScript 算法每日一題：加一

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商