JavaScript：如何从字符串中剥离HTML标记？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们常常需要从后端获取一些包含HTML标记的字符串数据。但是，在某些情况下，我们需要处理这些字符串并去除其中的HTML标记。这篇文章将介绍一些用JavaScript实现该功能的方法和技巧。

方法一：使用正则表达式

正则表达式是一种强大的字符串匹配工具，它可以用来查找和替换符合特定模式的文本。我们可以使用正则表达式来匹配HTML标记，并将其替换为空字符串。以下是示例代码：

function stripHtmlTags(html) {
  return html.replace(/<[^>]*>/g, '');
}

const htmlString = '<p>Hello, <strong>world!</strong></p>';
const strippedString = stripHtmlTags(htmlString);
console.log(strippedString); // Output: "Hello, world!"

这段代码中，stripHtmlTags函数接收一个包含HTML标记的字符串作为参数，并返回一个不包含HTML标记的新字符串。在函数内部，我们使用了正则表达式/<[^>]*>/g来匹配所有的HTML标记，并将其替换为空字符串。

方法二：使用DOM解析器

另一种方法是使用浏览器提供的DOM解析器将HTML字符串解析成DOM节点，并获取其textContent属性。以下是示例代码：

function stripHtmlTags(html) {
  const doc = new DOMParser().parseFromString(html, 'text/html');
  return doc.body.textContent || '';
}

const htmlString = '<p>Hello, <strong>world!</strong></p>';
const strippedString = stripHtmlTags(htmlString);
console.log(strippedString); // Output: "Hello, world!"

在这个例子中，我们首先使用DOMParser将HTML字符串解析成一个DOM文档。然后，我们获取该文档的body节点，并返回其textContent属性。由于textContent只返回文本内容，因此所有的HTML标记都会被自动去除。

注意事项

虽然这两种方法都可以有效地剥离HTML标记，但是它们也存在一些限制和注意事项。以下是需要注意的几点：

正则表达式可能会遗漏某些情况下的HTML标记，例如<script>和<style>标记内部的内容。
DOM解析器可能会解析非法的HTML标记，并生成不符合预期的DOM树结构。
在处理用户输入时，必须谨防跨站脚本攻击（XSS）。

为了避免这些问题，我们建议使用成熟的HTML解析库或模板语言来处理包含HTML标记的字符串。这些工具通常会提供更完整和安全的HTML解析功能，并且能够防止XSS攻击。

结论

在本文中，我们介绍了两种用JavaScript实现从字符串中剥离HTML标记的方法。使用正则表达式或DOM解析器都可以实现该功能，但需要注意其限制和注意事项。为了更安全和完整地处理HTML字符串，我们推荐使用成熟的HTML解析库或模板语言。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/10452