去除无效HTML标签之间的空格的正则表达式 - 例如"< / b >"应该是"</b>"

Question

我有一些 HTML，这些 HTML 都被标签内的空格弄乱了，并且希望使其再次有效 - 例如：

< div class='test' >1 > 0 is < b >true</ b> and apples >>> bananas< / div >

应转换为有效的 HTML，并且在渲染时，预计会生成：

<code><div class='test'>1 > 0 is <b>true</b> and apples >>> bananas</div></code>

文本中任何 > 或 >< 前面/后面有空格的文本应保持不变 - 例如，1 > 0 应保留，而不是被压缩为 1>0

我意识到这可能需要几个正则表达式，这很好

我有几件事：

<\s?\/\s* 这将部分修复 到

Answer 1

没有合理的方法来保存像您发布的内容一样损坏的文档，但假设您将文本中的 > 和类似字符替换为其相关实体，例如： > ;，您可以将要接受的文档放入适当的库中，例如 DomDocument 将处理剩下的事情。

$input = <<<_E_
< div class='test' >1 > 0 is < b >true</ b> and apples >>> bananas< / div >
_E_;

$input = preg_replace([ '#<\s+#', '#</\s+#' ], [ '<', '</' ], $input);

$d = new DomDocument();
$d->loadHTML($input, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);

var_dump($d->saveHTML());

输出：

string(80) "<div class="test">1 > 0 is <b>true</b> and apples >>> bananas</div>"

Answer 2

这个正则表达式也有效：

它将 HTML 标记中的有效部分分为四个部分，并用其替换其余部分（空格）。

Regex101 演示

/(<)\s*(\/?)\s*([^<>]*\S)\s*(>)/g

• (<)<) - 捕获起始尖括号（第 1 节）
• \s* - 匹配任何空格
• (\/?) - 捕获可选的反斜杠（第 2 部分）
• \s* - 匹配反斜杠后的任何空格
• ([^<>]*\S) - 捕获标签内的内容，不带尾随空格（第 3 节）
• \s* - 匹配内容后面和右尖括号之前的空格
• (>) - 捕获右尖括号（第 4 节）

const reg = /(<)\s*(\/?)\s*([^<>]*\S)\s*(>)/g
const str = "< div class='test' >1 > 0 is < b >true< / b > and apples >>> bananas< / div  >"
const newStr = str.replace(reg, "");
console.log(newStr);