Question

想象一下，我们在编辑器中有这个代码：

<div class="menu">
  <div>Hello 1</div>
  <div>Hello 2</div>
  <div>Hello 3</div>
</div>

如何删除html标记之间的所有空格？所以结果应该是：

<div class="menu"><div>Hello 1</div><div>Hello 2</div><div>Hello 3</div</div>

Answer 1

所以我通过自定义块功能解决了这个问题，我使用以下代码创建了新的PHP文件“smarty / plugins / block.minify.php”：

function smarty_block_minify($params, $content, &$smarty, &$repeat) {
    if (!$repeat) {
        if (isSet($content)) {
            // HTML Minifier
            $input = $content;
            if(trim($input) === "") return $input;
            // Remove extra white-space(s) between HTML attribute(s)
            $input = preg_replace_callback('#<([^\/\s<>!]+)(?:\s+([^<>]*?)\s*|\s*)(\/?)>#s', function($matches) {
                return '<' . $matches[1] . preg_replace('#([^\s=]+)(\=([\'"]?)(.*?)\3)?(\s+|$)#s', ' $1$2', $matches[2]) . $matches[3] . '>';
            }, str_replace("\r", "", $input));
            // Minify inline CSS declaration(s)
            if(strpos($input, ' style=') !== false) {
                $input = preg_replace_callback('#<([^<]+?)\s+style=([\'"])(.*?)\2(?=[\/\s>])#s', function($matches) {
                    return '<' . $matches[1] . ' style=' . $matches[2] . minify_css($matches[3]) . $matches[2];
                }, $input);
            }
            return preg_replace(
                array(
                    // t = text
                    // o = tag open
                    // c = tag close
                    // Keep important white-space(s) after self-closing HTML tag(s)
                    '#<(img|input)(>| .*?>)#s',
                    // Remove a line break and two or more white-space(s) between tag(s)
                    '#(<!--.*?-->)|(>)(?:\n*|\s{2,})(<)|^\s*|\s*$#s',
                    '#(<!--.*?-->)|(?<!\>)\s+(<\/.*?>)|(<[^\/]*?>)\s+(?!\<)#s', // t+c || o+t
                    '#(<!--.*?-->)|(<[^\/]*?>)\s+(<[^\/]*?>)|(<\/.*?>)\s+(<\/.*?>)#s', // o+o || c+c
                    '#(<!--.*?-->)|(<\/.*?>)\s+(\s)(?!\<)|(?<!\>)\s+(\s)(<[^\/]*?\/?>)|(<[^\/]*?\/?>)\s+(\s)(?!\<)#s', // c+t || t+o || o+t -- separated by long white-space(s)
                    '#(<!--.*?-->)|(<[^\/]*?>)\s+(<\/.*?>)#s', // empty tag
                    '#<(img|input)(>| .*?>)<\/\1\x1A>#s', // reset previous fix
                    '#(&nbsp;)&nbsp;(?![<\s])#', // clean up ...
                    // Force line-break with `&#10;` or `&#xa;`
                    '#&\#(?:10|xa);#',
                    // Force white-space with `&#32;` or `&#x20;`
                    '#&\#(?:32|x20);#',
                    // Remove HTML comment(s) except IE comment(s)
                    '#\s*<!--(?!\[if\s).*?-->\s*|(?<!\>)\n+(?=\<[^!])#s'
                ),
                array(
                    "<$1$2</$1\x1A>",
                    '$1$2$3',
                    '$1$2$3',
                    '$1$2$3$4$5',
                    '$1$2$3$4$5$6$7',
                    '$1$2$3',
                    '<$1$2',
                    '$1 ',
                    "\n",
                    ' ',
                    ""
                ),
                $input);

            return $input;
        }
    }
}

现在我可以通过{minify}some html code{/minify}来调用它。

Answer 2

如果您无法访问Smarty的安装目录以安装上述插件，则可以执行以下操作：

<!-- "strip" removes line breaks -->
{capture name="nospacesbetweentags"}
{strip}
    <div class="row">
        <div class="col-md-4 col-sm-6">
            Lorem ipsum dolor sit amet consectetur
        </div>
        <div class="col-md-4 col-sm-6">
            Lorem ipsum dolor sit amet consectetur
        </div>
        <div class="col-md-4 col-sm-6">
            Lorem ipsum dolor sit amet consectetur
        </div>
    </div>
{/strip}
{/capture}
<!-- this removes spaces & tabs between tags -->
{$smarty.capture.nospacesbetweentags|replace:"> <":"><"|replace:">  <":"><"}

我不知道正则表达式替换是否更好，但这对我来说很好。

编辑： {strip}无法处理包含的子模板（{strip}{include "..."}{/strip}）。因此，|strip修饰符是必需的：

{capture name="nospacesbetweentags"}
    <div id="row1" class="row">
        <div class="col-md-4 col-sm-6">
            Lorem ipsum dolor sit amet consectetur
        </div>
        <div class="col-md-4 col-sm-6">
            Lorem ipsum dolor sit amet consectetur
        </div>
        <div class="col-md-4 col-sm-6">
            Lorem ipsum dolor sit amet consectetur
        </div>
    </div>
    {include "row2.tpl"}
{/capture}
<!-- |strip already modifies multiple tabs into a sigle space -->
{$smarty.capture.nospacesbetweentags|strip|replace:"> <":"><"}

Answer 3

使用{strip}

{strip}
<div class="menu">
  <div>Hello 1</div>
  <div>Hello 2</div>
  <div>Hello 3</div>
</div>
{/strip}

如果你想删除空格，即使在相同的行，它有点复杂，你必须使用捕获并进行正则表达式替换（或为此创建自己的插件）：

{capture name="code"}
{strip}
<div id="1"></div> <div id="2"></div>
{/strip}
{/capture}
{$smarty.capture.code|regex_replace:'/\>[\s\r\t\n]*\</':'><'}

然而，当标签之间的空间应该存在时，这会产生意想不到的结果。考虑即：

<strong>one hundred</strong> <span class="unit">grams</span>

删除空格会将html呈现为

百克

如何删除Smarty中标签之间的所有空格？

3 个答案: