使用JavaScript删除标记之间的每个空格

时间:2012-08-17 23:37:59

标签: javascript regex whitespace

我正在尝试删除标记之间的空白区域,以便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时,我会得到相同的旧字符串。

5 个答案:

答案 0 :(得分:18)

它(不是,请参阅规则之后)因为字符串是不可变的,我认为,并且您将父元素的innerHTML设置为您之前从中检索的完全相同的字符串。 / p>

相反,我建议:

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 demo


关于来自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 demo

参考文献:

答案 1 :(得分:15)

对于大多数情况,我建议从以下位置删除空间:

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

有两种情况我可以想到这不会做你想要的,这两种情况会影响上面那些不那么激进的解决方案。

  • 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");

答案 2 :(得分:10)

只有空格:

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

新行,标签和空格:

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

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

答案 3 :(得分:3)

你能否将html标签视为js中的字符串?我想可以做到。 试试这个!

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

答案 4 :(得分: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" );
}

这似乎完美无缺,但遗憾的是,它打破了我的页脚中的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>