使用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我会得到相同的旧字符串.

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小提琴演示.

关于来自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小提琴演示.

参考文献:

• JavaScript正则表达式.

Answer 2

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

• 文件的开头
• 文件结束
• >性格之后
• 在<性格之前

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

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

• 我原来的答案已经更新在保留空白<script>,<style>,<pre>,或<textarea>标签.所有这些<pre>都是CDATA,这意味着内容不是HTML,并且在找到结束标记之前进行解析,这意味着正则表达式是一个完整的解决方案.如果<pre>嵌套或使用white-spaceCSS属性,则不会保留您的内容.

解决方案:

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

Answer 3

只有空格:

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

新行,制表符和空格:

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

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

Answer 4

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

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