使用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元素之間的空白空間實際上是布局的預期或預期部分。 如果此空間折疊為零個字符，則會刪除元素之間的隱式空間。 這可以通過更改我的正則表達式替換為" "來避免。

• 我的原始答案已更新，以保留<script> ， <style> ， <pre>或<textarea>標記中的空格。 除<pre>之外的所有這些都是CDATA，這意味着內容不是HTML，並且在找到結束標記之前進行解析，這意味着正則表達式是一個完整的解決方案。 如果嵌套了<pre>或使用了white-space CSS屬性，則不會保留您的內容。

解決方案：

    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, ' ');

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

這似乎完美無缺，但不幸的是，它打破了我的頁腳中的谷歌搜索框。

在嘗試了許多正則表達式的變化后，我沒有成功，我在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>