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