整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
在某個文件中需要引用某個文件夾下的所有js文件。這種情況在使用webpack搭建的項目中使用下面的方法即可獲取到：
const modules=require.context(
'./', // 在當(dāng)前目錄下查找
true, // 遍歷子文件夾
/\.js$/ // 正則匹配 以 .vue結(jié)尾的文件
)但是，在使用vite搭建的vue3.x的項目里面是不能使用上面的這個方法的。因為require.context這個方法是由webpack所提供的，但vite并不提供這個方法。那該如何解決呢？
vite的官方網(wǎng)站其實是給出了類似的功能方法的。可以使用其提供的Glob 導(dǎo)入（https://vitejs.cn/guide/features.html#glob-import），使用方法如下：
// 指定包含的文件
const modules=import.meta.glob('./dir/*.js')最后生成的效果：
、BeautifulSoup簡介
BeautifulSoup是Python爬蟲應(yīng)用解析Html的利器，是Python三方模塊bs4中提供的進行HTML解析的類，可以認(rèn)為是一個HTML解析工具箱，對HTML報文中的標(biāo)簽具有比較好的容錯識別功能。lxml是一款html文本解析器，BeautifulSoup構(gòu)建對象時需要指定HTML解析器，推薦使用lxml。
BeautifulSoup和lxml安裝命令：
1.pip install -i https://pypi.tuna.tsinghua.edu.cn/simple bs4
2.pip install -i https://pypi.tuna.tsinghua.edu.cn/simple lxml
加載BeautifulSoup：
1.from bs4 import BeautifulSoup
BeatifulSoap解析HTML報文的常用功能：
通過標(biāo)簽的contents屬性，可以訪問其下嵌套的所有下級HTML元素，這些該標(biāo)簽下的子標(biāo)簽對應(yīng)的HTML元素放到一個contents 指向的列表中。
如：print(soup.body.contents)
可以訪問標(biāo)簽對應(yīng)的父、子、兄弟及祖先標(biāo)簽信息；
使用strings屬性迭代訪問除標(biāo)簽外的所有內(nèi)容；
可以使用find、find_all、find_parent、find_parents等系列方法查找滿足特定條件的標(biāo)簽；
使用select通過css選擇器定位特定標(biāo)簽。
二、一些解析技巧
在HTML解析時，如果通過簡單的tag、或單個tag屬性（如id、class）或文本一次搜索或select定位是最簡單的，而有些情況需要使用組合方法才能處理。
2.1、通過標(biāo)簽的多個屬性組合定位或查找
經(jīng)常有些要定位的標(biāo)簽有很多，按單個屬性查找也有很多，得使用多個屬性查找。如：
上面的html文本中有多個id為article_content的div標(biāo)簽，如果使用：
就會返回兩條記錄。這時候就可以使用多標(biāo)簽屬性定位的如下4種語句：
以上四種方式是等價的，因為id可以用#來標(biāo)記，class在查找時需要和Python關(guān)鍵字class區(qū)分，因此有上述不同方法，注意select的每個屬性必須用中括號括起來，不同屬性的中括號之間不能有空格，如果有空格表示的就不是查找同一標(biāo)簽的屬性，空格后的屬性表示前一個屬性對應(yīng)標(biāo)簽的子孫標(biāo)簽的屬性。
2.2、利用tag標(biāo)簽關(guān)系定位內(nèi)容
tag標(biāo)簽關(guān)系包括父子、兄弟、祖先等關(guān)系，有時要查找或定位的內(nèi)容本身不是很好定位，但結(jié)合其他標(biāo)簽關(guān)系（主要是父子、祖先關(guān)系）則可以唯一確認(rèn)。
案例：
這是博文中關(guān)于博主個人信息的部分報文：
以上報文中，如果要取博主的原創(chuàng)文章數(shù)和周排名，原創(chuàng)文章數(shù)和博主周排名的tag標(biāo)簽完全相同，二者都在span標(biāo)簽內(nèi)，標(biāo)簽的屬性及值都相同，只是span標(biāo)簽的父標(biāo)簽dt標(biāo)簽的兄弟標(biāo)簽dd標(biāo)簽的string的中文內(nèi)容才能區(qū)分。對于這種情況，首先要通過祖先標(biāo)簽<div class="data-info d-flex item-tiling">定位到祖先標(biāo)簽，再在祖先標(biāo)簽內(nèi)通過中文字符串定位到要訪問屬性的兄弟標(biāo)簽的子標(biāo)簽，然后通過該子標(biāo)簽找到其父標(biāo)簽的父標(biāo)簽，再通過該父標(biāo)簽的dt子標(biāo)簽的span子標(biāo)簽訪問具體取值。
示例代碼如下：
注意：上面的select使用的也是標(biāo)簽的屬性來定位標(biāo)簽，并且兩個中括號之間有空格，表明后一個要查找的標(biāo)簽在前一個屬性對應(yīng)標(biāo)簽的子孫標(biāo)簽范圍內(nèi)。
2.3、分析前去除程序代碼避免干擾
在解析HTML報文時，絕大多數(shù)情況是需要分析有用的標(biāo)簽信息，但作為技術(shù)文章，大部分的博文中都有代碼，這些代碼可能會對分析進行干擾。如本文中的代碼含有一些分析的HTML報文，如果獲取本文的完整HTML內(nèi)容，這些報文在非代碼部分也會出現(xiàn)，此時要排除代碼的影響，可以將代碼先從分析內(nèi)容中去除再來分析。
目前大多數(shù)技術(shù)平臺的博文編輯器都支持對代碼的標(biāo)識，象markdown等編輯器代碼的標(biāo)簽為code標(biāo)檢，如果有其他編輯器用不同標(biāo)簽的，只有確認(rèn)了標(biāo)簽名，都可以按下面介紹的類似方式來處理。
處理步驟如下：
獲取報文；
構(gòu)建BeatifulSoap對象soup；
通過soup.code.extract()或soup.code.decompose（）方式就從soup對象中去除了代碼部分，decompose方法與extract方法的區(qū)別就是decompose直接刪除對應(yīng)對象數(shù)據(jù)而extract再刪除時將刪除對象單獨返回。
三、小結(jié)
本文介紹了使用BeatifulSoap解析HTML報文的三個使用技巧，包括通過多屬性組合查找或定位標(biāo)簽、通過結(jié)合多個標(biāo)簽關(guān)系來定位標(biāo)簽以及去除html報文中的代碼標(biāo)簽來避免代碼對解析的影響。
寫字不易，敬請支持：
如果閱讀本文于您有所獲，敬請點贊、評論、收藏，謝謝大家的支持！
————————————————
版權(quán)聲明：本文為轉(zhuǎn)載文章，如有侵權(quán)，請聯(lián)系作者刪除。
天想聊聊在Web前端開發(fā)中經(jīng)常用到的技術(shù)：獲取元素屬性的一系列方法【innerHTML、outerHTML、innerText 、outerText、value、text()、html()，val()】
這些方法，大家應(yīng)該用過，如果讓你說出它們的一些區(qū)別和聯(lián)系，能答得上來嗎？接下來讓我們一起來溫故下。
首先我們需要把它們歸類下：
innerHTML、outerHTML、innerText 、outerText、value 屬于原生javascript的方法。
text()、html()，val()屬于jQuery中的方法。
1、innerHTML 屬性
在讀模式下，innerHTML屬性返回與調(diào)用元素的所有子節(jié)點（包括元素、注釋和文本節(jié)點）對應(yīng)的 HTML 標(biāo)記。在寫模式下，innerHTML 會根據(jù)指定的值創(chuàng)建新的 DOM 樹，然后用這個 DOM 樹完全替換調(diào)用元素原先的所有子節(jié)點。下面是一個例子：
<div id="content"> <p>This is a <strong>paragraph</strong> with a list following it.</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div>
對于上面的<div>元素來說，它的 innerHTML 屬性會返回如下字符串。
<p>This is a <strong>paragraph</strong> with a list following it.</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
2、outerHTML 屬性
在讀模式下，outerHTML 返回調(diào)用它的元素及所有子節(jié)點的 HTML 標(biāo)簽。在寫模式下，outerHTML 會根據(jù)指定的 HTML 字符串創(chuàng)建新的 DOM 子樹完全替換調(diào)用元素。下面是一個例子。
<div id="content"> <p>This is a <strong>paragraph</strong> with a list following it.</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div>
如果在<div>元素上調(diào)用 outerHTML，會返回與上面相同的代碼，包括<div>本身。
使用 outerHTML 屬性以下面這種方式設(shè)置值：
div.outerHTML="<p>This is a paragraph.</p>";
這行代碼完成的操作與下面這些 DOM 腳本代碼一樣：
var p=document.createElement("p");
p.appendChild(document.createTextNode("This is a paragraph."));
div.parentNode.replaceChild(p, div);
結(jié)果，就是新創(chuàng)建的<p>元素會取代 DOM 樹中的<div>元素。
replaceChild() 方法用新節(jié)點替換某個子節(jié)點。
語法：
node.replaceChild(newnode,oldnode)
3、innerText 屬性
通過 innerText 屬性可以操作元素中包含的所有文本內(nèi)容，包括子文檔樹中的文本。在通過 innerText 讀取值時，它會按照由淺入深的順序，將子文檔樹中的所有文本拼接起來。在通過 innerText 寫入值時，結(jié)果會刪除元素的所有子節(jié)點，插入包含相應(yīng)文本值的文本節(jié)點。下面是一個例子：
<div id="content"> <p>This is a <strong>paragraph</strong> with a list following it.</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div>
對于這個例子中的 <div> 元素而言，其中 innerText 屬性會返回下列字符串：
This is a paragraph with a list following it. Item 1 Item 2 Item 3
使用 innerText 屬性設(shè)置這個<div>元素內(nèi)容，則只需一行代碼：
div.innerText="Hello world!";
執(zhí)行這行代碼后，頁面的 HTML 代碼就會變成如下所示：
<div id="content">Hello world!</div>
設(shè)置 innerText 屬性移除了先前存在的所有子節(jié)點，完全改變了 DOM 樹。
設(shè)置 innerText 永遠(yuǎn)只會生成當(dāng)前節(jié)點的一個子文本節(jié)點，而為了確保只生成一個字文本節(jié)點，就必須要對文本進行 HTML 編碼。利用這一點，可以通過 innerText 屬性過濾掉 HTML 標(biāo)簽。方法是將 innerText 設(shè)置等于 innerText，這樣就可以去掉所有 HTML 標(biāo)簽，比如：
div.innerText=div.innerText;
執(zhí)行這行代碼后，就用原來的文本內(nèi)容替換了容器元素中的所有內(nèi)容（包括子節(jié)點，因而也就去掉了 HTML 標(biāo)簽）。舉個栗子：
<label id="lab">請輸入北京今天空氣質(zhì)量：<input id="aqi-input" type="text"></label>
輸出：
4、outerText 屬性
除了作用范圍擴大到了包含 調(diào)用它的節(jié)點之外，outerText 與innerText 基本上沒有多大區(qū)別。在讀取文本值時，outerText 與 innerText 的結(jié)果完全一樣。但在寫模式下，outerText 就完全不同了：outerText 不只是替換調(diào)用它的元素的子節(jié)點，而是會替換整個元素（包括子節(jié)點）。比如：
div.outerText="Hello world!";
這行代碼實際上相當(dāng)于如下兩行代碼：
var text=document.createTextNode("Hello world!");
div.parentNode.replaceChild(text,div);
本質(zhì)上，新的文本節(jié)點會完全取代調(diào)用 outerText 的元素。此后，該元素就從文檔中被刪除，無法訪問。
5、value 屬性
屬性可設(shè)置或返回密碼域的默認(rèn)值。獲取文本框的值。
6、text():設(shè)置或者獲取所選元素的文本內(nèi)容
1）無參text（）：
取得所有匹配元素的內(nèi)容。結(jié)果是由所有匹配元素包含的文本內(nèi)容組合起來的文本。返回的是一個String。
2）有參text（val）：
設(shè)置所有匹配元素的文本內(nèi)容,與 html() 類似, 但將編碼 HTML (將 "<" 和 ">" 替換成相應(yīng)的HTML實體).返回一個jquery對象。
7、html():設(shè)置或者獲取所選元素的內(nèi)容（包括html標(biāo)記）
1）無參html（）：
取得第一個匹配元素的html內(nèi)容。這個函數(shù)不能用于XML文檔。但可以用于XHTML文檔，返回的是一個String。
2）有參html（val）：
設(shè)置每一個匹配元素的html內(nèi)容。這個函數(shù)不能用于XML文檔。但可以用于XHTML文檔。返回一個jquery對象。
8、val()方法
主要用于獲取表單元素的值如input, select 和 textarea。當(dāng)在一個空集合上調(diào)用，它返回undefined；
1）無參 val() :
獲取匹配的元素集合中第一個元素的當(dāng)前值。例子：
HTML代碼：
<input type="text" value="你好啊"> <input type="text" value="啊哈哈哈"> <input type="text" value="嘻嘻嘻嘻">
控制臺輸出：
2）有參val（val）：
設(shè)置每一個匹配元素的值。返回一個jquery對象。
總結(jié)
對于這八大方法：innerHTML、outerHTML、innerText 、outerText、value、text()、html()，val()。您現(xiàn)在是否已經(jīng)很清晰了？
我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：前端，即可免費獲取。
原文鏈接：https://mp.weixin.qq.com/s/K7SyPeuZedmuj-a4HwoYfQ
作者： 前端大牛愛好者
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
