怎樣用 JS 壓縮 HTML ？

實現 HTML 壓縮，可以使用 JavaScript 中的正則表達式來去除 HTML 中的空格和注釋。以下是一個簡單的 HTML 壓縮函數：

function compressHTML(html) {
  // 去除注釋
  html = html.replace(/<!--[\s\S]*?-->/g, "");
  // 去除多余空白
  html = html.replace(/\s+/g, " ");
  // 去除標簽之間空格
  html = html.replace(/>\s+</g, "><");
  return html.trim();
}

該函數首先使用正則表達式去除 HTML 中的注釋。然后，它使用另一個正則表達式去除 HTML 中的多余空格。最后，它使用另一個正則表達式去除標簽之間的空格。

為了測試該函數，您可以創建一個 HTML 文件，并在其中添加一些冗余的空格和注釋。例如：

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <!-- This is a comment -->
    <h1> Welcome to my website! </h1>
    <p> This is some text. </p>
  </body>
</html>

然后，您可以在Node.JS中使用以下代碼將 HTML 文件加載為字符串并壓縮它：

// 加載 HTML 文件
const fs = require("fs");
const html = fs.readFileSync("index.html", "utf8");
// 壓縮 HTML
const compressedHtml = compressHTML(html);
console.log(compressedHtml);

輸出是一個壓縮后的 HTML 字符串，其中不包含注釋或冗余空格。

或者直接在IE中測試，代碼如下：

function compressHTML(html) {
  // 去除注釋
  html = html.replace(/<!--[\s\S]*?-->/g, "");
  // 去除多余空白
  html = html.replace(/\s+/g, " ");
  // 去除標簽之間空格
  html = html.replace(/>\s+</g, "><");
  return html.trim();
}
var html =`
<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <!-- This is a comment -->
    <h1> Welcome to my website! </h1>
    <p> This is some text. </p>
  </body>
</html>
`;
console.log(compressHTML(html));

運行效果：

者：Roman Orac
魚羊編譯整理
量子位報道 | 公眾號 QbitAI

數據分析，如何能錯過 Pandas 。

現在，數據科學家 Roman Orac 分享了他在工作中相見恨晚的 Pandas 使用技巧。

了解了這些技巧，能讓你在學習、使用 Pandas 的時候更加高效。

話不多說，一起學習一下~

Pandas實用技巧

用 Pandas 做數據分析，最大的亮點當屬 DataFrame。不過，在展示成果的時候，常常需要把 DataFrame 轉成另一種格式。

Pandas 在這一點上其實十分友好，只需添加一行代碼。

DataFrame 轉 HTML

如果你需要用 HTML 發送自動報告，那么 to_html 函數了解一下。

比如，我們先設定這樣一個 DataFrame：

import numpy as np
import pandas as pd
import random

n = 10
df = pd.DataFrame(
    {
        "col1": np.random.random_sample(n),
        "col2": np.random.random_sample(n),
        "col3": [[random.randint(0, 10) for _ in range(random.randint(3, 5))] for _ in range(n)],
    }
)

用上 to_html，就可以將表格轉入 html 文件：

df_html = df.to_html()
with open(‘analysis.html’, ‘w’) as f: f.write(df_html)

與之配套的，是 read_html 函數，可以將 HTML 轉回 DataFrame。

DataFrame 轉 LaTeX

如果你還沒用過 LaTeX 寫論文，強烈建議嘗試一下。

要把 DataFrame 值轉成 LaTeX 表格，也是一個函數就搞定了：

df.to_latex()

DataFrame 轉 Markdown

如果你想把代碼放到 GitHub 上，需要寫個 README。

這時候，你可能需要把 DataFrame 轉成 Markdown 格式。

Pandas 同樣為你考慮到了這一點：

print(df.to_markdown())

注：這里還需要 tabulate 庫

DataFrame 轉 Excel

說到這里，給同學們提一個小問題：導師/老板/客戶要你提供 Excel 格式的數據，你該怎么做？

當然是——

df.to_excel(‘analysis.xlsx’)

需要注意的是，如果你沒有安裝過 xlwt 和 openpyxl 這兩個工具包，需要先安裝一下。

另外，跟 HTML 一樣，這里也有一個配套函數：read_excel，用來將excel數據導入pandas DataFrame。

DataFrame 轉字符串

轉成字符串，當然也沒問題：

df.to_string()

5個鮮為人知的Pandas技巧

此前，Roman Orac 還曾分享過 5 個他覺得十分好用，但大家可能沒有那么熟悉的 Pandas 技巧。

1、data_range

從外部 API 或數據庫獲取數據時，需要多次指定時間范圍。

Pandas 的 data_range 覆蓋了這一需求。

import pandas as pd
date_from = “2019-01-01”
date_to = “2019-01-12”
date_range = pd.date_range(date_from, date_to, freq=”D”)
print(date_range)

freq = “D”/“M”/“Y”，該函數就會分別返回按天、月、年遞增的日期。

2、合并數據

當你有一個名為left的DataFrame：

和名為right的DataFrame：

想通過關鍵字“key”把它們整合到一起：

實現的代碼是：

df_merge = left.merge(right, on = ‘key’, how = ‘left’, indicator = True)

3、最近合并（Nearest merge）

在處理股票或者加密貨幣這樣的財務數據時，價格會隨著實際交易變化。

針對這樣的數據，Pandas提供了一個好用的功能，merge_asof。

該功能可以通過最近的key（比如時間戳）合并DataFrame。

舉個例子，你有一個存儲報價信息的DataFrame。

還有一個存儲交易信息的DataFrame。

現在，你需要把兩個DataFrame中對應的信息合并起來。

最新報價和交易之間可能有10毫秒的延遲，或者沒有報價，在進行合并時，就可以用上 merge_asof。

pd.merge_asof(trades, quotes, on=”timestamp”, by=’ticker’, tolerance=pd.Timedelta(‘10ms’), direction=‘backward’)

4、創建Excel報告

在Pandas中，可以直接用DataFrame創建Excel報告。

import numpy as np
import pandas as pd

df = pd.DataFrame(np.array([[1, 2, 3], [4, 5, 6], [7, 8, 9]]), columns=["a", "b", "c"])

report_name = 'example_report.xlsx'
sheet_name = 'Sheet1'
writer = pd.ExcelWriter(report_name, engine='xlsxwriter')
df.to_excel(writer, sheet_name=sheet_name, index=False)

不只是數據，還可以添加圖表。

# define the workbook
workbook = writer.book
worksheet = writer.sheets[sheet_name]
# create a chart line object
chart = workbook.add_chart({'type': 'line'})
# configure the series of the chart from the spreadsheet
# using a list of values instead of category/value formulas:
#     [sheetname, first_row, first_col, last_row, last_col]
chart.add_series({
    'categories': [sheet_name, 1, 0, 3, 0],
    'values':     [sheet_name, 1, 1, 3, 1],
})
# configure the chart axes
chart.set_x_axis({'name': 'Index', 'position_axis': 'on_tick'})
chart.set_y_axis({'name': 'Value', 'major_gridlines': {'visible': False}})
# place the chart on the worksheet
worksheet.insert_chart('E2', chart)
# output the excel file
writer.save()

注：這里需要 XlsxWriter 庫

5、節省磁盤空間

Pandas在保存數據集時，可以對其進行壓縮，其后以壓縮格式進行讀取。

先搞一個 300MB 的 DataFrame，把它存成 csv。

df = pd.DataFrame(pd.np.random.randn(50000,300))
df.to_csv(‘random_data.csv’, index=False)

壓縮一下試試：

df.to_csv(‘random_data.gz’, compression=’gzip’, index=False)

文件就變成了136MB。

gzip壓縮文件可以直接讀取：

df = pd.read_csv(‘random_data.gz’)

這一份Pandas技巧筆記，暫且說到這里。各位同學都做好筆記了嗎？

Talk is cheap, show me the code。學會了，就用起來吧

— 完 —

量子位 QbitAI · 頭條號簽約

關注我們，第一時間獲知前沿科技動態

文轉載自微信公眾號「全棧修仙之路」，作者阿寶哥。轉載本文請聯系全棧修仙之路公眾號。

在日常工作中，文件上傳是一個很常見的功能。在上傳文件時，我們可以選擇上傳單個文件，也可以通過設置 multiple 屬性來上傳多個文件。

本文阿寶哥將介紹如何上傳目錄及如何壓縮目錄并上傳，壓縮目錄的功能是通過 JSZip 這個庫來實現。利用這個庫還可以實現在線預覽 ZIP 文件的功能，感興趣的小伙伴可以閱讀 JavaScript 如何在線解壓 ZIP 文件? 這篇文章。下面我們先來介紹如何實現壓縮目錄并上傳的功能。

一、瀏覽器端

1.1 選擇目錄

在瀏覽器端，要實現壓縮目錄并上傳的功能。首先我們要先實現選擇目錄的功能，要實現該功能，我們可以直接使用 HTMLInputElement 元素的 webkitdirectory 屬性：

<input type="file" id="uploadFile" webkitdirectory />

當設置了 webkitdirectory 屬性之后，我們就可以選擇目錄了。當阿寶哥選擇了 useAxios 目錄之后，就會顯示以下確認框：

點擊上傳按鈕之后，我們就可以獲取文件列表。列表中的文件對象上含有一個 webkitRelativePath 屬性，用于表示當前文件的相對路徑。在進行目錄壓縮的時候，我們就會使用到該屬性。

雖然通過 webkitdirectory 屬性可以很容易地實現選擇目錄的功能，但在實際項目中我們還需要考慮它的兼容性。比如在 IE 11 以下的版本就不支持該屬性，其它瀏覽器的兼容性如下圖所示：

(圖片來源 —— https://caniuse.com/?search=webkitdirectory)

1.2 壓縮目錄

在 JavaScript 如何在線解壓 ZIP 文件? 這篇文章中，阿寶哥介紹了在瀏覽器端如何使用 JSZip 這個庫實現在線解壓 ZIP 文件的功能。JSZip 這個庫除了可以解析 ZIP 文件之外，它還可以用來創建和編輯 ZIP 文件。這里阿寶哥基于 JSZip 庫提供的 API，封裝了一個 generateZipFile 函數：

function generateZipFile( 
  zipName, files, 
  options = { type: "blob", compression: "DEFLATE" } 
) { 
  return new Promise((resolve, reject) => { 
    const zip = new JSZip(); 
    for (let i = 0; i < files.length; i++) { // 添加目錄中包含的文件 
      zip.file(files[i].webkitRelativePath, files[i]); 
    } 
    zip.generateAsync(options).then(function (blob) { // 生成zip文件 
      zipName = zipName || Date.now() + ".zip"; 
      const zipFile = new File([blob], zipName, { 
        type: "application/zip", 
      }); 
      resolve(zipFile); 
    }); 
  }); 
}

在以上代碼中，我們使用 file(name, data [,options]) 方法，把目錄中的文件依次添加到 zip 對象中，然后再通過 generateAsync 方法來生成 ZIP 文件。在生成 ZIP 文件時，我們可以設置該文件的類型。這里我們設置的默認類型為 blob 類型，除了支持 blob 類型之外，它還支持 base64、uint8array 和 arraybuffer 等類型。

1.3 上傳壓縮 ZIP 文件

在壓縮目錄生成 ZIP 文件之后，我們就可以通過 XMLHttpRequest 或 fetch API 來上傳壓縮文件。下面阿寶哥將以 axios 為例，來實現文件上傳的功能。

html 代碼

<input type="file" id="uploadFile" webkitdirectory /> 
<button id="submit" onclick="uploadFile()">上傳文件</button>

js 代碼

const uploadFileEle = document.querySelector("#uploadFile"); 
const uploadOptions = { needZip = true }; 
 
const request = axios.create({ 
  baseURL: "http://localhost:3000/", 
  timeout: 5000, 
}); 
 
async function uploadFile({ needZip } = uploadOptions) { 
  if (!uploadFileEle.files.length) return; 
  let fileList = uploadFileEle.files; 
  if (needZip) { // 對目錄進行ZIP壓縮 
    let webkitRelativePath = fileList[0].webkitRelativePath; 
    let zipFileName = webkitRelativePath.split("/")[0] + ".zip"; 
    fileList = [await generateZipFile(zipFileName, fileList)]; 
  } 
  uploadFiles({ // 上傳文件列表 
    url: "/upload/multiple", 
    files: fileList, 
  }); 
}

在 uploadFile 函數中，如果有啟用目錄壓縮功能，我們就會調用 generateZipFile 函數生成 ZIP 文件，如果沒有的話，就會直接調用 uploadFiles 函數來上傳目錄中的所有文件，當然你也可以對文件列表進行過濾，比如限制文件類型或文件的大小等。

下面我們來看一下 uploadFiles 函數的具體實現：

function uploadFiles({ url, files, fieldName = "file" }) { 
  if (!url || !files.length) return; 
  let formData = new FormData(); 
  for (let i = 0; i < files.length; i++) { 
    formData.append(fieldName, files[i], files[i].name); 
  } 
  return request.post(url, formData); 
}

在 uploadFiles 函數中，我們通過創建 FormData 對象來保存文件的信息，然后通過 request(axios 實例)來執行上傳操作。

二、服務器端

2.1 接收 ZIP 文件

在服務端要實現文件上傳功能也比較簡單，這里阿寶哥以 koa 為例來實現文件上傳的功能。如果你對 koa 還不了解的話，建議你先大致瀏覽一下 koa 的官方文檔。

const path = require("path"); 
const Koa = require("koa"); 
const cors = require("@koa/cors"); 
const multer = require("@koa/multer"); 
const Router = require("@koa/router"); 
 
const app = new Koa(); 
const router = new Router(); 
const UPLOAD_DIR = path.join(__dirname, "/public/upload"); 
 
const storage = multer.diskStorage({ 
  destination: async function (req, file, cb) { // 設置文件的存儲目錄 
    cb(null, UPLOAD_DIR); 
  }, 
  filename: function (req, file, cb) { // 設置文件名 
    cb(null, `${file.originalname}`); 
  }, 
}); 
 
const multerUpload = multer({ storage }); 
 
router.get("/", async (ctx) => { 
  ctx.body = "壓縮文件目錄上傳示例（阿寶哥）"; 
}); 
 
router.post( 
  "/upload/multiple", 
  multerUpload.fields([ 
    { 
      name: "file", 
    }, 
  ]), 
  async (ctx, next) => { 
    ctx.body = { 
      status: "success", 
      msg: "文件上傳成功", 
    }; 
  } 
); 
 
// 注冊中間件 
app.use(cors()); 
app.use(router.routes()).use(router.allowedMethods()); 
 
app.listen(3000, () => { 
  console.log("app starting at port 3000"); 
});

在以上代碼中，我們通過 @koa/multer 這個中間件來處理文件上傳，對該中間件感興趣的小伙伴，可以自行閱讀官方文檔。接下來，我們來繼續討論另一個問題 —— 如何接收目錄并按照文件目錄結構進行存放?

2.2 接收文件目錄

前面我們已經知道，當 input[type="file"] 使用了 webkitdirectory 屬性之后，返回 File 對象的 webkitRelativePath 屬性就會存放當前文件相對于當前目錄的相對路徑：

因此當我們在服務端處理文件目錄上傳的功能時，我們就可以通過該屬性來創建對應的目錄結構，具體的處理邏輯如下所示：

const fse = require("fs-extra"); 
 
const storage = multer.diskStorage({ 
  destination: async function (req, file, cb) { 
    // 把useAxios@demo.vue中的@替換為路徑分隔符 
    let relativePath = file.originalname.replace(/@/g, path.sep);  
    let index = relativePath.lastIndexOf(path.sep);  
    let fileDir = path.join(UPLOAD_DIR, relativePath.substr(0, index)); // 生成文件路徑 
    await fse.ensureDir(fileDir); // 確保當前目錄存在 
    cb(null, fileDir); 
  }, 
  filename: function (req, file, cb) { 
    let parts = file.originalname.split("@"); // 對路徑進行拆分 
    cb(null, `${parts[parts.length - 1]}`); // 獲取文件名 
  }, 
});

為什么 originalname 文件原始名稱會包含 @ 符號呢?這樣因為使用 useAxios/demo.vue 這種路徑形式時，是不能獲取到完整的路徑名稱，只能獲取到文件名。為了解決這個問題，阿寶哥在上傳文件時，手動把文件相對路徑中的 / 符號替換為 @ 然后再進行上傳，對應的處理邏輯如下：

function uploadFiles({ url, files, fieldName = "file" }) { 
  if (!url || !files.length) return; 
  let formData = new FormData(); 
  for (let i = 0; i < files.length; i++) { 
    formData.append(fieldName, files[i], files[i].webkitRelativePath.replace(/\//g, "@")); 
  } 
  return request.post(url, formData); 
}

好的，壓縮目錄上傳和目錄上傳已經介紹完了，感興趣的小伙伴可以動手試試看。由于完整的示例代碼內容比較多，阿寶哥就不放具體的代碼了。有需要的小伙伴，可以訪問以下地址瀏覽示例代碼。

https://gist.github.com/semlinker/af57349c16d203cc2ec845d4b5a6b445

注意：以上代碼僅供參考，請根據實際業務進行調整。

三、總結

本文阿寶哥介紹了如何利用 input[type="file"] 元素的 webkitdirectory 屬性來實現選擇目錄的功能，然后利用 JSZip 這個庫來實現目錄壓縮，最后通過 axios 來上傳目錄壓縮后的 ZIP 文件。此外，阿寶哥還介紹了如何使用 koa 來實現接收目錄并按照文件目錄結構進行存放的功能。

四、參考資源

JSZip 官方文檔

MDN - webkitdirectory

JavaScript 如何在線解壓 ZIP 文件?

在線咨詢

上一篇：一篇文章深入了解小程序和蘋果支付！
下一篇：10個免費的HTML在線編輯工具

您的項目需求

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

整合營銷服務商