使用JavaScript去掉标签的方法有多种：使用正则表达式、创建临时DOM元素、使用库函数等。本文将重点介绍使用正则表达式、创建临时DOM元素两种方法。 在实际开发中，创建临时DOM元素的方法更为可靠和推荐，因为它能够更好地处理复杂的HTML结构和嵌套标签。
一、使用正则表达式去掉标签
正则表达式是一种强大的工具，可以用来匹配和替换文本中的模式。使用正则表达式去掉标签是一种简单直接的方法，但要注意它可能无法处理复杂的嵌套结构。
正则表达式的基本用法
正则表达式的基本语法可以帮助我们匹配HTML标签，并将其替换为空字符串。以下是一个基本的示例：
function stripTags(str) {
return str.replace(/]+(>|$)/g, "");
}
const htmlString = "
This is a link in a paragraph.
";const result = stripTags(htmlString);
console.log(result); // 输出: This is a link in a paragraph.
在这个例子中，/]+(>|$)/g是一个用于匹配HTML标签的正则表达式。它会匹配以<开头、以>或/>结尾的所有标签，并将其替换为空字符串。
正则表达式的局限性
虽然正则表达式可以有效地去掉大部分标签，但它在处理嵌套标签和复杂HTML结构时可能会遇到问题。例如：
const complexHtml = "
This is a link inside a div.
const result = stripTags(complexHtml);
console.log(result); // 输出: This is a link inside a div.
在这种情况下，正则表达式仍然能正常工作，但当HTML结构变得更加复杂时，问题可能会显现。特别是对于有嵌套的标签，正则表达式可能无法正确处理。
二、使用临时DOM元素去掉标签
相比于正则表达式，使用临时DOM元素的方法更加可靠。它利用浏览器的解析能力，将HTML字符串转换为DOM对象，并提取文本内容。
创建临时DOM元素
我们可以创建一个临时的
function stripTagsUsingDOM(html) {
const tempDiv = document.createElement("div");
tempDiv.innerHTML = html;
return tempDiv.textContent || tempDiv.innerText || "";
}
const htmlString = "
This is a link in a paragraph.
";const result = stripTagsUsingDOM(htmlString);
console.log(result); // 输出: This is a link in a paragraph.
处理复杂HTML结构
使用临时DOM元素的方法可以更好地处理复杂的HTML结构和嵌套标签。例如：
const complexHtml = "
This is a link inside a div.
const result = stripTagsUsingDOM(complexHtml);
console.log(result); // 输出: This is a link inside a div.
这种方法在处理嵌套标签时表现优异，因为浏览器会正确解析HTML并生成对应的DOM树。我们可以从中提取纯文本，而不用担心嵌套结构的问题。
三、结合使用正则表达式和DOM元素
在某些情况下，我们可能需要结合使用正则表达式和DOM元素的方法。例如，当我们需要去掉特定标签或属性时，可以先使用正则表达式进行预处理，再使用临时DOM元素提取文本。
示例代码
以下是一个结合使用正则表达式和DOM元素的方法的示例：
function stripSpecificTags(html, tagsToRemove) {
const regex = new RegExp(`]*>`, 'gi');
const preProcessedHtml = html.replace(regex, "");
return stripTagsUsingDOM(preProcessedHtml);
}
const htmlString = "
This is a link in a paragraph.
";const result = stripSpecificTags(htmlString, ["script"]);
console.log(result); // 输出: This is a link in a paragraph.
在这个例子中，我们首先使用正则表达式去掉特定的";
var cleanText = htmlString.replace(//gi, '');
console.log(cleanText);
这段代码将会输出：这是一段带有标签的文本。，其中[sS]*?用来匹配标签内的任意字符，gi用来进行全局和不区分大小写的匹配。
原创文章，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/2257611