替换几乎所有HTML标记，而不用JS中的字符串替换其中的一些标记

问题描述

我需要替换字符串中几乎所有的HTML标签。

我只想保留几个标签：

例如：

INPUT:
"<p>TEXT</p><div>container</div><p></p><ul><li><b>list element</b>: 0.1 [mm]</li><li><strong>Another list element</strong>: 0.2</li></ul><span>span element</span>"

OUTPUT:
"<p>TEXT</p>container<p></p><ul><li><b>list element</b>: 0.1 [mm]</li><li>Another list element: 0.2</li></ul>span element"

我知道我可以一一替换所有标签来做到这一点：

string.replace(/<\/span>/g,'');

也许有更快的选择。

我该如何实现？

解决方法

最好避免使用正则表达式来解析Html，在这种情况下，您可以使用诸如DOMParser之类的html解析器

 htmls = `<p>TEXT</p><div>container</div><p></p><ul><li><b>list element</b>: 0.1 [mm]</li><li><strong>Another list element</strong>: 0.2</li></ul><span>span element</span>`;
let parser = new DOMParser();
let doc = parser.parseFromString(htmls,"text/html");
let span = doc.getElementsByTagName("span");
let sr = doc.getElementsByTagName("strong");
let elmarray = [...Array.from(span),...Array.from(sr)];
elmarray.forEach((e) => {
 e.outerHTML = e.innerHTML;
});
  console.log(doc.body.innerHTML);

如果您的html很简单，则可以谨慎使用replace和正则表达式

html =
"<p>TEXT</p><div>container</div><p></p><ul><li><b>list element</b>: 0.1 [mm]</li><li><strong>Another list element</strong>: 0.2</li></ul><span>span element</span>";
r = html.replace(/(<\/?span>|<\/?strong>)/g,"");
console.log(r);

我能想到的最好/最快的方法是，如Sven.hig所建议的那样，从输入字符串中创建一个html DOM，对其进行解析，并为要保留的所有标记获取theouterHTML，并为其他
这是一个精确地做到这一点的代码片段：

    /* Input and Output strings */
    let input = "<p>TEXT</p><div>container</div><p></p><ul><li><b>list element</b>: 0.1 [mm]</li><li><strong>Another list element</strong>: 0.2</li></ul><span>span element</span>";
    let output = "";

    /* Array of the tagNames which you want to keep */
    let nonDeleatableTags = ["p","li","ul","ol","b"];

    /* We retrieve every html elements in the given input string */
    let allTagElements = Array.from(
                          new DOMParser()
                          .parseFromString(input,"text/html")
                          .getElementsByTagName("*")
                         ).filter(element => (element.tagName != "HTML" && element.tagName != "HEAD" && element.tagName != "BODY")); //The DOMParser will give us the <html>,<head> and <body> tags which we don't use
                        
    for(const element of allTagElements) {
      /* We want to avoid printing the same element twice if its a childNode */
      let alreadyInspected = false;
      for(const inspectedElement of allTagElements)
        if(element != inspectedElement && inspectedElement.contains(element))
          alreadyInspected = true;

      if(!alreadyInspected)
          output += (nonDeleatableTags.includes(element.tagName.toLowerCase())) ? element.outerHTML : element.innerHTML;      //The .toLowerCase can be omitted if you write the nonDeleatableTags elements with the upperCase
    }

    console.log(input);
    console.log(output);

如果要保留其他标签，只需将它们添加到nonDeleatableTags数组中就可以了！