Javascript - 3種 HTML 轉換為純文本的方法

幾天，我手里的一個項目需要將富文本的所有 html 標簽全部刪除，得到純文本后再存儲到數據庫中。在一系列得搜索操作之后，我找到了實現這個目的的幾種方法，在這里我分享給大家，當你遇到同樣的情況興許也能用的上。

1. 使用 .replace(/<[^>]*>/g, '')

這個方法是從文本中去除 html 標簽最簡單的方法。它使用字符串的方法 .replace(待替換的字符串，替換后的字符串) 將 HTML 標簽替換成空值。 /g 是表示替換字符串所有匹配的值，即字符串中所有符合條件的字符都將被替換。

這個方法的缺點是有些 HTML 標簽不能被剔除，不過它依然很好用。

2. 創建臨時DOM元素并獲取其中的文本

這種方法是完成該問題的最有效的方法。創建一個臨時 DOM 并給他賦值，然后我們使用 DOM 對象方法提取文本。

3. 使用 html-to-text npm 包

html-to-text 這個包的功能很全了，轉換也有許多的選項比如：wordwrap, tags, whitespaceCharacters , formatters 等等。

安裝：

npm install html-to-text

使用：

最后感謝閱讀，如果此文對您有幫助，請點贊或添加關注。

一篇文章Stimulus 狀態管理，幻燈片顯示講述了Stimulus的狀態管理，接下來我們看看如何跟蹤外部資源的狀態。

有時候我們的controllers需要跟蹤外部的資源的狀態，這里的外部指的是不在DOM或不在Stimulus中的任何東西。例如，我們可能需要發出HTTP請求，并在請求狀態變化時進行響應。或者我們希望啟動一個定時器，然后當controller斷開連接時停止定時器。在本文，我們將解決這些問題。

接下來，我們學習一下，如何通過加載和插入遠程HTML片段，來異步填充頁面的各個部分。

我們要創建一個通用的用于加載內容的controller，所有的HTML內容都是從服務器獲取的。然后我們將用它來加載一系列未讀的消息，就像你在郵箱里看到的那樣。

打開public/index.html：

<div data-controller="content-loader"
    data-content-loader-url-value="/messages.html"></div>

然后創建一個public/messages.html

<ol>
    <li>New Message: Stimulus Launch Party</li>
    <li>Overdue: Finish Stimulus 1.0</li>
</ol>

在真實應用中，這個內容是服務器動態生成的，但是這里出于示范的目的，我們就用一個靜態文件。

現在我們實現一下我們的controller：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    static values = { url: String }

    connect() {
        this.load()
    }

    load() {
        fetch(this.urlValue)
            .then(response => response.text())
            .then(html => this.element.innerHTML = html)
    }
}

當controller連接元素時，會根據data-content-loader-url-value屬性值設置的url，發起請求。然后把請求得到的HTML內容，賦值給連接元素的innerHTML。

打開瀏覽器的開發者工具，點開網絡查看tab頁，然后刷新頁面。您將看到一個表示初始頁面加載的請求，隨后是controller對messages.html的后續請求。

我們繼續優化一下controller，隔段時間就刷新div內的內容，讓它一直顯示最新的內容。

我們使用data-content-loader-refresh-interval-value屬性值來設定刷新的時間間隔，單位是毫秒，

<div data-controller="content-loader"
    data-content-loader-url-value="/messages.html"
    data-content-loader-refresh-interval-value="5000"></div>

現在我們修改一下controller，檢查間隔，如果間隔值存在，就啟動一個定時器來刷新。

在controller里添加一個static values，然后定義一個新方法startRefreshing():

export default class extends Controller {
    static values = { url: String, refreshInterval: Number }
    
    startRefreshing() {
        setInterval(() => {
            this.load()
        }, this.refreshIntervalValue)
    }

    // …
}

然后修改connect()方法，如果refreshInterval值存在的話，就調用startRefreshing()方法。

connect() {
    this.load()

    if (this.hasRefreshIntervalValue) {
        this.startRefreshing()
    }
}

刷新頁面，然后通過開發者工具，觀察一下，是不是每5秒鐘就會有一個新請求。然后可以嘗試修改public/messages.html，所有的改變都會出現在div內。

當controller連接元素時，我們啟動了定時器，但是我們沒有停止它。這意味著，如果我們的controller連接的元素消失的話，controller將在后臺繼續發起HTTP請求。

我們修復這個問題，修改startRefreshing()方法，保存一個對定時器的引用：

startRefreshing() {
    this.refreshTimer = setInterval(() => {
        this.load()
    }, this.refreshIntervalValue)
}

然后添加一個對應的stopRefreshing()方法，來取消定時器：

stopRefreshing() {
    if (this.refreshTimer) {
        clearInterval(this.refreshTimer)
    }
}

最終，我們告訴Stimulus當controller失去連接時，取消定時器，好，我們添加一個disconnect()方法：

disconnect() {
    this.stopRefreshing()
}

現在我們可以確定，內容加載器controller只會在連接到DOM時才會發出請求。

我們來看一下最終的controller類：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    static values = { url: String, refreshInterval: Number }

    connect() {
        this.load()

        if (this.hasRefreshIntervalValue) {
            this.startRefreshing()
        }
    }

    disconnect() {
        this.stopRefreshing()
    }

    load() {
        fetch(this.urlValue)
            .then(response => response.text())
            .then(html => this.element.innerHTML = html)
    }

    startRefreshing() {
        this.refreshTimer = setInterval(() => {
            this.load()
        }, this.refreshIntervalValue)
    }

    stopRefreshing() {
        if (this.refreshTimer) {
            clearInterval(this.refreshTimer)
        }
    }
}

本文介紹了如何使用Stimulus生命周期回調來獲取和釋放外部資源。

S6作為新一代JavaScript標準，已正式與廣大前端開發者見面。為了讓大家對ES6的諸多新特性有更深入的了解，Mozilla Web開發者博客推出了《ES6 In Depth》系列文章。CSDN已獲授權，將持續對該系列進行翻譯，組織成【探秘ES6】系列專欄，供大家學習借鑒。本文為該系列的第六篇。

什么是解構賦值？

解構賦值可將數組的元素或對象的屬性賦予給另一個變量，該變量的定義語法與數組字面量或對象字面量很相似。此語法非常簡潔，相比于傳統的屬性訪問方式，更加直觀清晰。

在不使用解構賦值的情況下，通常我們這樣訪問數組中的元素：

var first = someArray[0];
var second = someArray[1];
var third = someArray[2];

使用解構賦值后，代碼得到了極大的簡化，同時可讀性也更強：

var [first, second, third] = someArray;

除了個別特性，解構賦值的大部分特性在SpiderMonkey（Firefox的JavaScript引擎）中都已得到支持，詳見 bug 694100。

解構數組與其可迭代性

上面的例子為我們展示了解構賦值在數組中的運用，其基本語法形式為：

[ variable1, variable2, ..., variableN ] = array;

這只是將變量1到變量N分配到數組相應的元素中。當然，如果想在同一時間對變量進行聲明，可以在賦值前增加相應的關鍵字：var，let或const：

var [ variable1, variable2, ..., variableN ] = array;
let [ variable1, variable2, ..., variableN ] = array;
const [ variable1, variable2, ..., variableN ] = array;

事實上，變量一詞用的并不準確，因為解構賦值同樣可以用于數組嵌套的情況（注意：左右兩側的格式應保持一致）：

var [foo, [[bar], baz]] = [1, [[2], 3]];
console.log(foo);
// 1
console.log(bar);
// 2
console.log(baz);
// 3

此外，左側的變量列表還可以一種包含連續逗號的形式跳過右側對應的值：

var [,,third] = ["foo", "bar", "baz"];
console.log(third);
// "baz"

ES6中，提供了一種將右側多余的值以數組的形式賦值給左側變量的語法——“rest“模式：

var [head, ...tail] = [1, 2, 3, 4];
console.log(tail);
// [2, 3, 4]

無論是訪問數組外還是數組中不存在的元素，都會得到相同的結果：undifined：

console.log([][0]);
// undefined

var [missing] = ;
console.log(missing);
// undefined

注意，數組賦值模式的解構賦值，同樣也可迭代：

function* fibs {
  var a = 0;
  var b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

var [first, second, third, fourth, fifth, sixth] = fibs;
console.log(sixth);
// 5

解構對象

在對象中使用解構賦值，允許你為對象的不同屬性綁定變量名。這種情況下，解構賦值的左側部分類似一個對象字面量，對象中是一個名值對的列表，屬性名稱位于名值對內冒號左側，變量名稱位于名值對內冒號右側，每一個屬性都會去右側對象中查找相應的賦值，每一個值都會賦值給它對應的變量：

var robotA = { name: "Bender" };
var robotB = { name: "Flexo" };

var { name: nameA } = robotA;
var { name: nameB } = robotB;

console.log(nameA);
// "Bender"
console.log(nameB);
// "Flexo"

當屬性名稱和變量名稱相同時，可如下簡寫：

var { foo, bar } = { foo: "lorem", bar: "ipsum" };
console.log(foo);
// "lorem"
console.log(bar);
// "ipsum"

就像嵌套數組可用于解構賦值一樣，嵌套對象也可用于解構賦值，并且兩種語法還可以結合在一起使用：

var complicatedObj = {
  arrayProp: [
    "Zapp",
    { second: "Brannigan" }
  ]
};

var { arrayProp: [first, { second }] } = complicatedObj;

console.log(first);
// "Zapp"
console.log(second);
// "Brannigan"

使用解構賦值訪問對象中未定義的屬性，將會得到undifined：

var { missing } = {};
console.log(missing);
// undefined

為對象的屬性命名，但未對其聲明（缺少var、const或let關鍵字），會拋出一個語法錯誤：

{ blowUp } = { blowUp: 10 };
// Syntax error

這是因為，JavaScript的語法規定引擎對語句進行解析，需以塊語句為開頭（例如，{console}便是一個有效的塊語句）。解決的辦法是將整個表達式包裹在一對括號中：

({ safe } = {});
// No errors

非對象、數組、迭代的解構類型

當我們嘗試對null或undefined使用解構賦值時，將會拋出一個類型錯誤：

var {blowUp} = null;
// TypeError: null has no properties

但是，對于其他原始類型如：布爾量，數字或字符串等則可以運用解構賦值，并得到undifined：

var {wtf} = NaN;
console.log(wtf);
// undefined

對于這種情況，你可能會感到很意外。但原因其實很簡單，這是因為使用對象賦值模式時，被解構的值必需能夠轉換成一個對象（object）。大多數的類型都可以轉換為一個對象，但null和undefined卻并不能被轉換。當使用數組賦值模式時，其值必須有一個迭代器。

默認值

對于值和屬性未定義的數組與對象，你仍可以運用解構賦值的方式為其設定默認值：

var [missing = true] = ;
console.log(missing);
// true

var { message: msg = "Something went wrong" } = {};
console.log(msg);
// "Something went wrong"

var { x = 3 } = {};
console.log(x);
// 3

（編者注：此功能在Firefox上目前只實現了前兩種情況，而第三種并未實現。見bug932080。）

解構的實際應用

函數參數定義

作為開發人員，我們經常把一個對象用作函數的參數。這個對象具有很多的屬性，以便暴露出更多便于我們使用的API，從而無需迫使我們的開發者去記住大量獨立參數的順序。我們對參數對象使用解構賦值，這樣，在訪問對象屬性時，便可以避免重復調用這一參數對象，示例代碼如下：

function removeBreakpoint({ url, line, column }) {
  // ...
}

這是來自Firefox開發工具JavaScript調試器（在JavaScript中執行）中的代碼簡化片斷。我們發現這種模式是極好的。

配置對象參數

對前面的例子進行擴展，若我們正在對對象的屬性進行解構賦值，那么我們仍舊可以為其賦予默認值。這是十分有用的，尤其是當我們打算配置對象或是對象的屬性已經有了合理的默認值。例如，jQuery中的AJAX函數需要一個配置對象作為其第二參數，可以改寫如下：

jQuery.ajax = function (url, {
  async = true,
  beforeSend = noop,
  cache = true,
  complete = noop,
  crossDomain = false,
  global = true,
  // ... more config
}) {
  // ... do stuff
};

這樣就避免了為配置對象中的每個屬性重復：var foo = config.foo || theDefaultFoo（編者注：不幸的是，在Firefox中，對象簡寫語法中的默認值仍舊不可使用，詳情見bug932080的最新更新。）

ES6迭代協議

ECMAScript6中還定義了一項迭代的協議，在這個系列的前面我們已經談到過。當你遍歷Maps（一個ES6非標準庫），會得到一系列的[key，value]。我們可以對這些[key，value]運用解構的方式，從而方便地訪問它們：

var map = new Map;
map.set(window, "the global");
map.set(document, "the document");

for (var [key, value] of map) {
  console.log(key + " is " + value);
}
// "[object Window] is the global"
// "[object HTMLDocument] is the document"

只遍歷key：

for (var [key] of map) {
  // ...
}

或只遍歷value：

for (var [,value] of map) {
  // ...
}

多返回值

你可以通過數組的形式返回多個值，并對其解構賦值：

function returnMultipleValues {
  return [1, 2];
}
var [foo, bar] = returnMultipleValues;

或者，返回的值為一個對象，用解構賦值的方式對其進行命名：

function returnMultipleValues {
  return {
    foo: 1,
    bar: 2
  };
}
var { foo, bar } = returnMultipleValues;

與上面兩種模式相比，下面這種模式就顯得過于繁瑣：

function returnMultipleValues {
  return {
    foo: 1,
    bar: 2
  };
}
var temp = returnMultipleValues;
var foo = temp.foo;
var bar = temp.bar;

或著使用連續風格的傳遞（continuation passing style）：

function returnMultipleValues(k) {
  k(1, 2);
}
returnMultipleValues((foo, bar) => ...);

從CommonJS的模塊中導入接口名

不使用ES6模塊了嗎？仍使用CommonJS的模塊？沒問題！當導入一些CommonJS的模塊時，非常常見的情況是模塊的接口功能比你實際需求的多許多。通過解構的方式，你可以明確你需要的那部分，并且可以防止多余的接口名污染你的命名空間：

const { SourceMapConsumer, SourceNode } = require("source-map");

（如果你使用ES6模塊，你應當知道類似的語法可用于聲明導入。）

結語

所以，就如你所看到的那樣，在很多獨立細小的方面，解構賦值都非常有用。在Mozilla，關于它的使用我們積累了大量的經驗。十年前Lars Hansen將JS的解構賦值模式引入Opera，隨后Brendan Eich將他引入Firefox。并在Firefox2中得以應用。

之前，我們說ES6將會改變你寫JavaScript的方式。將這些新的特性和微小的改進結合起來，它終將會影響你工作中的每一個項目。這是一場以進化的方式發起的革命。

當然，這是團隊努力取得的成果。在這里，特別感謝Tooru Fujisawa (arai)和Arpad Borsos (Swatinem)作出的杰出貢獻。關于瀏覽器的支持方面，Chrome對解構的支持正在開發中，無疑其他瀏覽器會及時支持。至于現在，如果你想在Web上使用解構，則需要使用 Babel或Traceur。

在線咨詢

上一篇：Python 開發者的 10 大編程開發環境(IDE)，第一款是我的最愛
下一篇：都2021年竟然有人搞大數據忽略JSON去研究C#把XML轉換為XML的技術

您的項目需求

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

整合營銷服務商