正则表达式 - 如何删除HTML代码中的空白和新行？

问题描述：

我想从一个来自html语句的字符串中删除空格或新行。例子：让我们后续的字符串正则表达式 - 如何删除HTML代码中的空白和新行？

<ul class="list-group sidebar-nav-v1 margin-bottom-40" id="menuHomeUserPrivate">  
<li class="list-group-item active"> 
    <a id="to_ProfileOverall" class="privateMenuLinkJS"><i class="fa fa-bar-chart-o"></i> Overall</a> 
</li> 
<li class="list-group-item list-toggle"> 
    <a data-toggle="collapse" data-parent="#menuHomeUserPrivate" href="#collapse-MoneyManage" ><i class="fa fa-money"></i> Invoice</a> 
    <ul id="collapse-MoneyManage" class="collapse"> 
     <li><a id="to_MoneyManagerFaturamentoInsert" class="privateMenuLinkJS"><i class="fa fa-level-down"></i> Big Invoice </a></li> 
     <li><a id="to_MoneyManagerFaturamentoGerir" class="privateMenuLinkJS"><i class="fa fa-cogs"></i> Big big big 

Invoice 2 </a></li> 
    </ul> 
</li> 
</ul>

这是期望的结果：

<ul class="list-group sidebar-nav-v1 margin-bottom-40" id="menuHomeUserPrivate"><li class="list-group-item active"><a id="to_ProfileOverall" class="privateMenuLinkJS"><i class="fa fa-bar-chart-o"></i>Overall</a></li><li class="list-group-item list-toggle"><a data-toggle="collapse" data-parent="#menuHomeUserPrivate" href="#collapse-MoneyManage" ><i class="fa fa-money"></i> Invoice</a><ul id="collapse-MoneyManage" class="collapse"><li><a id="to_MoneyManagerFaturamentoInsert" class="privateMenuLinkJS"><i class="fa fa-level-down"></i>Big Invoice</a></li><li><a id="to_MoneyManagerFaturamentoGerir" class="privateMenuLinkJS"><i class="fa fa-cogs"></i>Big big big Invoice 2</a></li></ul></li></ul>

正如你可以看到：

只有1号线，没有枝条空格或之间的新线路“> <”，如果它们之间没有字符串。
我想修剪“> <”之间的字符串，如果有的话。例如：</i> Big Invoice </a>变成了</i>Big Invoice</a>。
最后

</i> Big big big Invoice 2 </a></li>

成为</i>Big big big Invoice 2</a></li>，在句子和修剪的中间没有新的生产线。

到目前为止，我实现了第一步。这是regex我用(>\s+<)但我不知道如何实现第2步和第3步。可能吗？任何想法？

更新：亚当的帖子后，这最终代码：

//把你的HTML代码在这里。不要用双引号“里面，而是使用单。

$str =<<<eof 

     your dynamic HTML here. 

eof; 

$re = "/(?:\\s*([<>])\\s*|(\\s)\\s*)/im"; 
$subst = "$1$2"; 
$result = preg_replace($re, $subst, $str); 

//If you want to use JSON 
$arrToJSON = array(
    "dataPHPtoJs"=>"yourData", 
    "htmlDyn"=>"$result"  
    ); 
$resultJSON= json_encode(array($arrToJSON));

此HTML字符串是干净的。所以，你可以用它低谷AJAX，JSON，里面的javascript，这将作品。

我我。我使用的是JavaScript代码，没有AJAX，JSON没有内侧箱

var htmlDyn="<?php echo $result; ?>"; 
//Do what you want to do with. 
$('.someElementClass').append(htmlDyn);

什么局域网你使用的是什么标准？ – Shafizadeh

[你不能用正则表达式解析任意的HTML]（http://*.com/a/1732454/222364）。您的代码可能*错误地*将'折叠为''。你需要为你正在使用的任何语言找到一个合适的HTML解析器。有可能已经做了你想要的东西，称为* HTML Minifier *。（而且我的示例似乎也在渲染空间......第一个空间应该有5个空格） –

答

这里是解决方案：

(?:\s*([<>])\s*|(\s)\s*)

小号ubstitution：

\1\2

你可以在这里尝试一下： https://regex101.com/r/dL5gB5/1

答

一些XML转换，如果你好吗？
以下片段位于PHP中，但也可以轻松转换为与Python一起使用。

<?php 
$string = <<<EOF 
<html> 
<ul class="list-group sidebar-nav-v1 margin-bottom-40" id="menuHomeUserPrivate">  
<li class="list-group-item active"> 
    <a id="to_ProfileOverall" class="privateMenuLinkJS"><i class="fa fa-bar-chart-o"></i> Overall</a> 
</li> 
<li class="list-group-item list-toggle"> 
    <a data-toggle="collapse" data-parent="#menuHomeUserPrivate" href="#collapse-MoneyManage" ><i class="fa fa-money"></i> Invoice</a> 
    <ul id="collapse-MoneyManage" class="collapse"> 
     <li><a id="to_MoneyManagerFaturamentoInsert" class="privateMenuLinkJS"><i class="fa fa-level-down"></i> Big Invoice </a></li> 
     <li><a id="to_MoneyManagerFaturamentoGerir" class="privateMenuLinkJS"><i class="fa fa-cogs"></i> Big big big 

Invoice 2 </a></li> 
    </ul> 
</li> 
</ul> 
</html> 
EOF; 

$xml = simplexml_load_string($string); 

$dom = new DOMDocument('1.0'); 
$dom->preserveWhiteSpace = false; 
$dom->formatOutput = false; 
$dom->loadXML($xml->asXML()); 

echo $dom->saveXML(); 
/* output: 
<html><ul class="list-group sidebar-nav-v1 margin-bottom-40" id="menuHomeUserPrivate"><li class="list-group-item active"><a id="to_ProfileOverall" class="privateMenuLinkJS"><i class="fa fa-bar-chart-o"/> Overall</a></li><li class="list-group-item list-toggle"><a data-toggle="collapse" data-parent="#menuHomeUserPrivate" href="#collapse-MoneyManage"><i class="fa fa-money"/> Invoice</a><ul id="collapse-MoneyManage" class="collapse"><li><a id="to_MoneyManagerFaturamentoInsert" class="privateMenuLinkJS"><i class="fa fa-level-down"/> Big Invoice </a></li><li><a id="to_MoneyManagerFaturamentoGerir" class="privateMenuLinkJS"><i class="fa fa-cogs"/> Big big big 

Invoice 2 </a></li></ul></li></ul></html> 
*/ 
?>

消除所有不必要的空白，然后更安全using regular expressions on HTML tags。

答

这将修剪标签旁边的空格，并在内容中间删除换行符。

查找：

(?:\s*(<(?:(?:/?[\w:]+\s*/?)|(?:[\w:]+\s+(?:(?:(?:"[\S\s]*?")|(?:'[\S\s]*?'))|(?:[^>]*?))+\s*/?)|\?[\S\s]*?\?|(?:!(?:(?:DOCTYPE[\S\s]*?)|(?:\[CDATA\[[\S\s]*?\]\])|(?:--[\S\s]*?--)|(?:ATTLIST[\S\s]*?)|(?:ENTITY[\S\s]*?)|(?:ELEMENT[\S\s]*?))))>)\s*|(?:\r?\n)+)

替换：

$1

输出：

<ul class="list-group sidebar-nav-v1 margin-bottom-40" id="menuHomeUserPrivate"><li class="list-group-item active"><a id="to_ProfileOverall" class="privateMenuLinkJS"><i class="fa fa-bar-chart-o"></i>Overall</a></li><li class="list-group-item list-toggle"><a data-toggle="collapse" data-parent="#menuHomeUserPrivate" href="#collapse-MoneyManage" ><i class="fa fa-money"></i>Invoice</a><ul id="collapse-MoneyManage" class="collapse"><li><a id="to_MoneyManagerFaturamentoInsert" class="privateMenuLinkJS"><i class="fa fa-level-down"></i>Big Invoice</a></li><li><a id="to_MoneyManagerFaturamentoGerir" class="privateMenuLinkJS"><i class="fa fa-cogs"></i>Big big big Invoice 2</a></li></ul></li></ul>

基准：

Regex1: (?:\s*(<(?:(?:/?[\w:]+\s*/?)|(?:[\w:]+\s+(?:(?:(?:"[\S\s]*?")|(?:'[\S\s]*?'))|(?:[^>]*?))+\s*/?)|\?[\S\s]*?\?|(?:!(?:(?:DOCTYPE[\S\s]*?)|(?:\[CDATA\[[\S\s]*?\]\])|(?:--[\S\s]*?--)|(?:ATTLIST[\S\s]*?)|(?:ENTITY[\S\s]*?)|(?:ELEMENT[\S\s]*?))))>)\s*|(?:\r?\n)+) 
Options: <none> 
Completed iterations: 50/50  (x 1000) 
Matches found per iteration: 29 
Elapsed Time: 6.75 s, 6749.58 ms, 6749576 µs

正则表达式 - 如何删除HTML代码中的空白和新行？

相关推荐