JS转换 HTML 字符实体

封面图 • 2025-12-19 • JavaScript

在 JavaScript 中，如果你想要将 HTML 字符实体（如 `&amp;`、`&lt;`、`&gt;` 等）转换为对应的字符（如 `&`、`<`、`>`），可以使用以下方法：

---

### ✅ 方法一：使用 DOM 解析器

这是最可靠的方法，通过创建一个 `DOMParser` 来解析 HTML 实体字符串。

```javascript
function decodeHtmlEntities(str) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(str, 'text/html');
  return doc.body.textContent;
}

// 示例
const htmlEntity = '&lt;div&gt;Hello &amp; World&lt;/div&gt;';
const decoded = decodeHtmlEntities(htmlEntity);
console.log(decoded); // 输出: <div>Hello & World</div>
```

---

### ✅ 方法二：使用正则表达式（不推荐用于复杂场景）

这种方法适用于简单的 HTML 实体，但无法处理所有情况（比如 Unicode 实体如 `&#x1F600;`）。

```javascript
function decodeHtmlEntities(str) {
  return str.replace(/&amp;|&lt;|&gt;|&quot;|&apos;/g, function(match) {
    switch (match) {
      case '&amp;': return '&';
      case '&lt;': return '<';
      case '&gt;': return '>';
      case '&quot;': return '"';
      case '&apos;': return "'";
      default: return match;
    }
  });
}

// 示例
const htmlEntity = '&lt;div&gt;Hello &amp; World&lt;/div&gt;';
const decoded = decodeHtmlEntities(htmlEntity);
console.log(decoded); // 输出: <div>Hello & World</div>
```

---

### ✅ 方法三：使用 `he` 库（第三方库）

如果你需要更全面的 HTML 实体支持（包括 Unicode 和自定义实体），可以使用 [he](https://github.com/mathiasbynens/he) 这个库。

#### 安装（如果用 npm）：
```bash
npm install he
```

#### 使用：
```javascript
const he = require('he');

const htmlEntity = '&lt;div&gt;Hello &amp; World&lt;/div&gt;';
const decoded = he.decode(htmlEntity);
console.log(decoded); // 输出: <div>Hello & World</div>
```

---

### 总结

| 方法 | 优点 | 缺点 |
|------|------|------|
| DOMParser | 简单、可靠、支持所有实体 | 不能直接用于 Node.js（除非使用 `jsdom`） |
| 正则表达式 | 快速、简单 | 不完整、不安全、不支持 Unicode |
| `he` 库 | 完整、灵活、支持 Unicode | 需要引入外部依赖 |

---

如果你告诉我你具体想转换什么内容，我可以帮你写更精确的代码。