使用JavaScript删除标签之间的所有空格

Question

我正在尝试删除标签之间的空格，以便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 时，我得到的仍然是旧的字符串。

- Rafael Adel

---

在正则表达式中，空格不是\n，而是\s。 - jfriend00

你为什么要试图在 JavaScript 中从已经呈现（假设）的 DOM 节点上删除空格？浏览器无论如何都会忽略这些空格。如果你想向客户端发送更紧凑的 HTML，你需要在服务器级别上进行更改。 - scunliffe

Answer 1

这不是因为字符串是不可变的，而是你正在将其父元素的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 Fiddle演示。

---

关于下面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 Fiddle演示.

参考资料:

• JavaScript正则表达式.

- David Thomas

---

在 OP 原始的 JS 代码中，字符串赋值没有任何问题。字符串是不可变的，但 .replace() 返回一个新的字符串，可以像 OP 所做的那样将其分配给 parentHTML，因此无论 OP 的代码存在什么问题，都不是由于字符串不可变性引起的。 - jfriend00

@jfriend00：啊？好的，感谢您的纠正。还有，问题出在哪里呢？显然是正则表达式模式。我应该首先看那里，回答已经被编辑、更新和更正了。=/ - David Thomas

这里的.replace(/>\s+</g, "><")选项在我看来似乎有效 - 请参见https://jsfiddle.net/Abeeee/gms6nt35/（尽管需要注意，它还需要修剪以删除外部空格） - user1432181

Answer 2

对于大多数情况，我建议从以下位置删除空格：

• 文档开头
• 文档结尾
• >字符后面
• <字符前面

我能想到两种情况，这两种情况会影响上述不那么激进的解决方案，因此这些情况下删除空格可能不会达到您的预期。

• inline-block元素之间的空白是布局的一部分。如果将此空格折叠为零个字符，则元素之间的隐式空格会被删除。可以通过更改下面的正则表达式以用" "替换来避免这种情况。

• 我的原始答案已更新，以保留<script>、<style>、<pre>或<textarea>标签中的空格。除了<pre>之外，所有这些标签都是CDATA，这意味着内容不是HTML，并且在找到关闭标签之前进行解析，因此正则表达式是完整的解决方案。如果嵌套了<pre>或使用了white-space CSS属性，则无法保留您的内容。

解决方案：

    collapsed = expanded.replace(/(<(pre|script|style|textarea)[^]+?<\/\2)|(^|>)\s+|\s+(?=<|$)/g, "$1$3");

- Adam Leggett

---

这是唯一有效的。当字符串包含双引号时，被接受的答案表现不佳。 - zfj3ub94rf576hc4eegm

绝对是最佳答案！应该被选中。 - MFAL

很好的答案，但它也删除了<a>标签前面的空格，这可能不是预期的。 - Dominic

这也会从<strong>和<b>标签中删除空格，因此"Some <strong>strong</strong> text"变成了"Some<strong>strong</strong>text"，这是错误的@adam-leggett - philk

是的，这个失败了，请更新你的答案。 - Zelensky

Answer 3

只有空格：

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

换行、制表符和空格：

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

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

- Joeri

---

\r\n 更合适，而不是 \n\t。 - vsync

@vsync：听起来像是一种观点，对这个页面上的任何问题都没有帮助。 - Joeri

Answer 4

你能在JavaScript中将HTML标签视为字符串吗？我猜可以。 试一下这个！

s.replace(/\s+/g, ' ');

- ln2khanal

---

不行，那将替换掉像这样的空格：<span>想要 空格</span> - Erdal G.

谢谢你，朋友。 - Anzil khaN

Answer 5

我遇到了这个线程，因为我正在寻找一种解决方案来消除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" );
}

这似乎完美地运作了，但不幸的是，它破坏了我页脚中的 Google 搜索框。

在尝试了许多不成功的正则表达式模式变化后，我在 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>

- MFM

---

请查看我的修订答案。你可能有一个被修改的<script>标签，而你使用的正则表达式版本恰好没有破坏它。 - Adam Leggett