JavaScript 正则表达式去除没有属性的 html 标签

Question

我有一个像 <font>New</font><font face="Akronim---Regular" color="#00ff00">Text</font> 这样的 Html 字符串，通过使用 JavaScript Regex，我想删除没有属性的字体标签。

所以上面html字符串的输出应该是New<font face="Akronim---Regular" color="#00ff00">Text</font>

下面是代码，它帮助我去除所有字体标签，但我只需要去除没有属性的字体标签。

var replace = new RegExp('<'+'font'+'[^><]*>|<.'+'font'+'[^><]*>','g')

var text    = '<font>New</font><font face="Akronim---Regular" color="#00ff00">Text</font>';

console.log(text.replace(replace, ''))

提前致谢。

Answer 1

如果您想使用正则表达式执行此操作，则必须逐个标记，同时跟踪嵌套级别，以便您知道何时删除结束标记，何时不删除。

要做到这一点，只需使用一个你经常使用的数组 push/pop到/从它遇到的标签类型。当你遇到开始标签时，你 push true如果它有属性和 false如果没有，则在它没有属性时将其删除。当你遇到结束标签时，你 pop最后遇到的开始标签的类型，如果它有属性(true)，则跳到下一个，如果没有(false)，则将其删除。

正则表达式应该在一次运行中遍历开始和结束标签，同时向我们提供关于它是结束标签还是开始标签以及它是否具有属性的信息。为此，我们像这样使用正则表达式 <\/?font [^\s]*?> , 我们团(\/)和 ([^\s]*?)因为无论这些组是否匹配，我们都会分别知道它是否是结束标记以及它是否具有属性(例如，如果我们匹配 / 那么它就是结束标记)。我们在 \s* 中添加处理空格，生成的正则表达式为 /<(\/)?\s*font\s*([^\s]*?)\s*>/g .

这是完成这项工作的函数:

function stripEmptyFonts(htmlString) {
   var tagTypes = [];

   return htmlString.replace(/<(\/)?\s*font\s*([^\s]*?)\s*>/g, function(match, closingSlash, attributes) {
      if(!closingSlash) {                                  // if it is an opening tag (no '/' was matched)
         tagTypes.push(!!attributes);                      // push true to the array tagTypes if it has attributes, otherwise push false (attributes will either be a string or null, we use the double negation !! to convert it to a boolean)
         return attributes ? match : "";                   // remove it if it has no attributes, otherwise keep it as is (read the docs of String#replace method)
      } else {                                             // if it is a closing tag (a '/' was matched)
         return tagTypes.pop() ? match : "";               // if the last tag we encounterd had attributes (pop returned true) we skip this closing tag, otherwise (pop return false) we remove it
      }
   });
}

示例:

function stripEmptyFonts(htmlString) {
   var tagTypes = [];

   return htmlString.replace(/<(\/)?\s*font\s*([^\s]*?)\s*>/g, function(match, closingSlash, attributes) {
      if(!closingSlash) {
         tagTypes.push(!!attributes);
         return attributes ? match : "";
      } else {
         return tagTypes.pop() ? match : "";
      }
   });
}

var html = `
<font>New</font>
<font color="red">Hello <font>world</font>!</font>
<font>Hello <font color="blue">back</font>!</font>
<font>ABCD<font>EFGH<font color="black">IJKL<font>MNOP<font color="red">QRST</font>UVWX</font>YZ</font>1234</font>5678</font>`

console.log(stripEmptyFonts(html));