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

时间:2016-03-01 20:37:30

标签: regex

我想删除来自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. 只有1行,没有空格或“&gt;&lt;”之间的新行如果它们之间没有字符串。
  2. 我想修剪“&gt;&lt;”之间的字符串如果有的话。示例:</i> Big Invoice </a>变为</i>Big Invoice</a>
  3. 最后

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

  4. 成为</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);
    

3 个答案:

答案 0 :(得分:2)

以下是解决方案:

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

换人:

\1\2

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

答案 1 :(得分:0)

如果您愿意,可以进行一些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更安全。

答案 2 :(得分:0)

这将修剪与标记相邻的空格并删除内容中间的换行符。

查找:

(?:\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