13

我正在尝试删除标签之间的空白，以便 childNodes 只包含那些标签节点而不是空白节点。这是我的代码：

<li>            
    <label for="firstName"  class="mainLabel">First Name : </label>                                 
    <input type="text" name="firstName" id="firstName"/>                                    
    <span>This must be filled</span>
</li>

这是JS代码：

var parentHTML = firstName.parentNode.innerHTML;
parentHTML = parentHTML.replace(/>\n</g,"><");
firstName.parentNode.innerHTML = parentHTML;

但是当我发出警报时，parentHTML我得到了相同的旧字符串。

4

5 回答 5

28

这是（不是，请参阅规则之后）因为字符串是不可变的，我认为，并且您将父元素的 innerHTML 设置为与您之前从中检索到的完全相同的字符串。

相反，我建议：

var firstname = document.getElementsByTagName('input')[0],
    parentHTML = firstname.parentNode.innerHTML,
    newHTML = parentHTML.replace(/\>\s+\</g,'');
firstname.parentNode.innerHTML = newHTML;

console.log(parentHTML, newHTML, (parentHTML == newHTML));

JS 小提琴演示。

关于 jfriend00 的评论（如下），似乎正则表达式是问题所在，\n与提供的模式不匹配，在这种情况下，以下修改满足要求：

var firstname = document.getElementsByTagName('input')[0],
    parentHTML = firstName.parentNode.innerHTML;
parentHTML = parentHTML.replace(/>\s+</g, "><");
firstName.parentNode.innerHTML = parentHTML;

console.log(firstname, parentHTML);​

JS 小提琴演示。

参考：

于 2012-08-17T23:41:25.967 回答
22

在大多数情况下，我建议从以下位置删除空间：

  • 文件开头
  • 文件结束
  • >字符后
  • <字符前

我可以想到两种情况，这不会满足您的要求，这两种情况会影响上述不太激进的解决方案。

  • 元素之间的空白空间inline-block实际上是布局的预期或预期部分。如果此空间折叠为零字符，则删除元素之间的隐式空间。这可以通过将下面的正则表达式更改为" ".

  • 我的原始答案已更新，以保留<script>、<style>、<pre>或<textarea>标签中的空格。所有这些除了<pre>CDATA 表示内容不是 HTML 并且被解析直到找到结束标记，这意味着正则表达式是一个完整的解决方案。如果 a<pre>是嵌套的或使用了white-spaceCSS 属性，这将不会保留您的内容。

解决方案：

    collapsed = expanded.replace(/(<(pre|script|style|textarea)[^]+?<\/\2)|(^|>)\s+|\s+(?=<|$)/g, "$1$3");
于 2016-10-13T16:45:18.923 回答
10

只有空格：

parentHTML = parentHTML.replace( new RegExp( "\>[ ]+\<" , "g" ) , "><" );

新行、制表符和空格：

parentHTML = parentHTML.replace( new RegExp( "\>[\s]+\<" , "g" ) , "><" );

https://regex101.com/r/sD7cT8/1

于 2013-04-09T09:35:29.660 回答
4

你能把一个html标签当作js中的一个字符串吗？我想这是可以做到的。尝试这个！

s.replace(/\s+/g, ' ');
于 2012-08-17T23:44:20.393 回答
0

我遇到了这个线程，因为我正在寻找一种解决方案来消除由 HTML 源代码中的空白或在我的情况下换行引起的 div 周围的空白。

在我意识到空白可能导致这些空白之前，我已经发疯了，试图摆脱它们。我想保持我的 HTML 源代码的可读性，所以压缩代码对我来说不是一个好的解决方案。即使我以这种方式处理它，它也无法修复由 Google 和其他供应商生成的 div。

我首先创建了以下函数并在 body onload 中调用它。

function Compress_Html() {
    //Remove whitespace between html tags to prevent gaps between divs.
    document.body.innerHTML = document.body.innerHTML.replace( /(^|>)\s+|\s+(?=<|$)/g, "$1" );
}

这似乎工作得很好，但不幸的是，它破坏了我在页脚中的谷歌搜索框。

在尝试了许多正则表达式模式的变体但没有成功后，我在http://www.regexpal.com/找到了这个正则表达式测试器。据我所知，以下模式可以满足我的需要。

( /(^|>)[ \n\t]+/g, ">" )

也就是说，该功能仍在破坏搜索框。所以我最终将它移动到一个 jQuery 文档就绪函数中。现在它正在工作并且不会破坏搜索框。

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
    $( document ).ready(function() {
        document.body.innerHTML = document.body.innerHTML.replace( /(^|>)[ \n\t]+/g, ">" );
    });
</script>
于 2017-02-11T17:32:35.307 回答