正则表达式（或其他 javascript 代码）以消除 html 中不需要的空格

Question

我想在 javascript 中处理一些 html 代码，以消除所有多余的空格，并将制表符和换行符转换为单个空格。这是棘手的部分：一些空格是有意义的，而另一些则没有，而且很难以编程方式分辨哪个是哪个。示例：

<table>
 <tr>
  <td>hi</td>
 </tr>
</table>

在上面的代码中，所有的空格和换行符都可以被删除，因为在 tr 和 td 标签之间有一个空格实际上是没有意义的（即使浏览器可能在其中创建一个文本节点，它也不会改变这页纸）。另一方面：

<span>following is a link</span>
 <a href="#">here it is</a>
<span>and this is text after the link</span>

这里，结束跨度标记和开始“a”标记（等）之间的空格是有意义的——没有它，链接周围就没有空格。

有什么通用的方法来处理这个问题吗？这似乎要求算法对html结构和不同标签的不同特征有一定的了解。

（注意：如果您想知道我为什么要在 javascript 中解析 html....这是一个实验性的客户端模板构建器 gizmo -- 说来话长，但请接受我这样做有充分的理由:) )

Answer 1

您可以将所有>\s+< 替换为><。但这并不安全。

想象一下：<span>this</span> <span>text</span> 在打印时会变成thistext。不过，用一个空格替换所有出现的多个空格应该是安全的：

html = html.replace(/>\s+</g,"> <"); 

Answer 2

好的，我自己解决了，所以我会把我的解决方案放在这里。我决定使用 DOM 而不是 html 作为字符串，然后我可以获取 innerHTML 作为最后一步。代码略显笨重，但思路是：

遍历元素的 DOM 树，将每个节点的数据保存到一个数组中（即线性，而不是树）。对于元素节点，在数组中同时存储一个“startelem”和“endelem”，相当于开始标签和结束标签。还要记下每个元素的计算“显示”属性（例如内联、块等），并将其放入数组中的两个项目中。 （对于所有节点，我还将深度存储到树中，但似乎不需要使用它）。

对于文本节点，请注意它是常规文本节点、全空格还是空字符串。

遍历数组，对于“空白”文本节点，查看数组中的上一项和下一项。如果其中任何一个是 display:inline，则将节点保留为单个空格。如果不是，请将文本节点更改为空字符串。

在此之后，对元素执行 innerHTML 将不会有多余的空格，而且，据我所知，元素在浏览器中的外观将不会改变。

代码如下：

  var stripUnneededTextNodes= function (elem) {
   var array = [];
   addNodeAndChildrenToArray(elem, 1, array);
   for (var i=1; i<array.length-1; i++) {
      if (array[i].type == "whitespace") {
        if (array[i-1].display == "inline" && array[i+1].display == "inline") {
          array[i].node.nodeValue = ' ';
          }
        else {
          array[i].node.nodeValue = '';
          array[i].killed = true;
          }          
        delete array[i].node;
        }
      else if (array[i].type == "text") {
        var val = array[i].node.nodeValue;
        if (val.charAt(0) == ' ' && array[i-1].display != "inline") {
          array[i].node.nodeValue = val = val.substring(1);
          }
        if (val.charAt(val.length-1) == ' ' && array[i+1].display != "inline") {
          array[i].node.nodeValue = val.substring(0, val.length-1);
          }
        delete array[i].node;
        }
      }
   };

 var addNodeAndChildrenToArray = function (node, depth, array) {
  switch (node.nodeType) {
    case 1: { // ELEMENT_NODE
      var display = document.defaultView.getComputedStyle (node, null).display;
      array.push ({type: "startelem", tag: node.tagName, display: display, depth: depth});

      if (node.childNodes && node.childNodes.length != 0) {
         for (var i=0; i<node.childNodes.length; i++)
            addNodeAndChildrenToArray(node.childNodes.item(i), depth+1, array);
        }
      array.push ({type: "endelem", tag: node.tagName, display: display, depth: depth});
      }
      break;

    case 3: { //TEXT_NODE
      var newVal = node.nodeValue.replace(/\s+/g, ' ');
      node.nodeValue = newVal;
      if (newVal == ' ')
        array.push ({type: "whitespace", node: node, depth: depth});
      else if (newVal == '')
        array.push ({type: "emptytext", depth: depth});
      else
        array.push ({type: "text", node: node, display: "inline", depth: depth});
      }
      break;
    }
  };