JavaScript 缩小 HTML 正则表达式答案

【问题标题】：JavaScript Minify HTML RegexJavaScript 缩小 HTML 正则表达式
【发布时间】：2014-04-25 05:26:30
【问题描述】：

什么是 JavaScript 正则表达式来缩小 HTML 的内容。请注意，我只想删除大于 2 且以下不包含任何内容的空格。

我也想把单引号' '换成双引号" "

这是我目前得到的，虽然我猜有一种更有效的方法：

var findSpaces = content.match(' ') >= 2;
var findQuotes = content.match(" ' ");

content.replace(findSpaces, "" );

content.replace(findQuotes, ' " ' );

请不要使用 j Query

【问题讨论】：

我不认为这是一个你可以“自己动手”并期望在不花费数小时和数小时的情况下把它做好的情况......如果你知道你将总是在非常简单的 HTML 上操作ONLY，那么你可能有机会......
用双引号替换单引号会破坏字符串中包含双引号的代码。删除所有额外的空格而不考虑空格是否在引号内也可能会破坏代码。
相关 - stackoverflow.com/q/44841365/104380

标签： javascript html regex

【解决方案1】：

在下面的示例中，所有新行 \r\n 或空格 between HTML 标签都被删除，并且在第二阶段 within HTML 标签的内容被缩小，所以额外空格被消除。

最后trim() 用于删除最终结果字符串前后的空格。

// dummy string to minify
var s = `

    <div   value="a"     class="a b"   id="a">
      <div>
        foo   bar  
        <br><br>
        <span>baz</span>   <i>a</i>  
      </div>
    </div>
`

function minify( s ){
  return s
    .replace(/\>[\r\n ]+\</g, "><")
    .replace(/(<.*?>)|\s+/g, (m, $1) => $1 ? $1 : ' ')
    .trim()
}

console.log(  minify(s)  )

以上内容也可以在我的收藏中以gist 的形式使用

【讨论】：

我不确定在代码压缩中通常需要删除短语内容元素（也就是 HTML5 之前的“内联元素”）之间的空格。它可以显着改变内容的含义。
我在我的所有项目中都这样做，我有 html 模板可以注入到 DOM 中，这实际上是必须做的。标签之间的空格可能会弄乱布局并干扰 CSS，删除这些空格不会对我造成任何伤害，当然，当您知道将其应用于什么时
好吧，我希望你很了解你的内容，并且只使用这种技术为你的项目引入 适当的解决方案:)
所以你注意到了我上面评论中的潜在问题，对吧？ ;) 顺便说一句，我坚信空格从不干扰 CSS，它是（次优的）CSS 可能会干扰它们并弄乱布局（例如使用 inline-blocks 水平排列块，即 Flexbox专为:)
是的，这是最臭名昭著的例子，它将空格有意义的 CSS 机制（内联格式）应用到不应该的任务（块的水平布局）上，不出所料地给出了不需要的结果。所以正确的问题是“如何使布局不依赖于源格式？”正确的答案是使用真正的布局机制（最有可能是 Flexbox），而不是用错误的方式伪造它。这个问题在 2011 年是有道理的，但现在它应该成为历史。自动删除空格可能带来的银弹错觉可能会导致其他问题。

【解决方案2】：

var s = `

    <div   value="a"     class="a b"   id="a">
      <div>
        foo bar  
        <br><br>
        <span>baz</span>   <i>a</i>  
      </div>
    </div>
`

console.log(
  s.replace(/\s{2,}/g, ' ').replace(/\'/g, '"')
)

应该为你做这项工作

【讨论】：

如果有转义单引号怎么办？如果 HTML 属性中没有使用单引号怎么办？如果有预格式化的内容包含多个空格并且需要保留怎么办？
那么它也会匹配单引号，你不想匹配转义的单引号吗？
OP 几乎没有努力定义他的实际需求，但他确实提到他想要“minify HTML”，这表明所有这些可能性都需要考虑。
这很好用。虽然当我将 "\s{2,}" 放在变量中以供以后使用时呢？即 var = "\s{2,}/g"
这还不够好。从示例中可以看出，如果 HTML 字符串的属性之间有多个空格，则整个字符串将变为无效，因为所有空格都将被删除