我正在尝试删除标签之间的空白,以便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
时,我得到了相同的旧字符串。
发布于 2012-08-17 23:41:26
这是因为字符串是不可变的,我认为,并且您将父元素的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));
关于来自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);
参考文献:
发布于 2016-10-13 16:45:19
在大多数情况下,我建议从以下位置删除空间:
>
<
character我能想到的有两种情况,这不会达到你想要的效果,这两种情况也会影响上面不那么激进的解决方案。
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");
发布于 2013-04-09 09:35:30
仅空格:
parentHTML = parentHTML.replace( new RegExp( "\>[ ]+\<" , "g" ) , "><" );
换行、制表符和空格:
parentHTML = parentHTML.replace( new RegExp( "\>[\s]+\<" , "g" ) , "><" );
https://stackoverflow.com/questions/12014441
复制相似问题