几天，我手里的一个项目需要将富文本的所有 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。