刪除刪除元素之前的空白處？

Question

我正在刪除<p>中包含的<span>。 有時有一個空間之前和之後<span>，這是<span>剝離時造成額外的空間。注意：我無法更改HTML。

JSFiddle

$('span:contains("Name"),span:contains("name"),span:contains("[]"),span:contains("[ ]")').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="item">Hi <span class="name">User Name</span> , I see you need...</p>

所以我想刪除只有當跨度被刪除的空間。

Answer 1

刪除跨度前後的空間。放在跨度內。

<p class="item">Hi<span class="name"> User Name </span>, I see you need...</p> 

這會工作嗎？

Answer 2

用什麼代替空格，就像這樣：

var str = "Test One"; 
str = str.replace(/ /g, ''); 

Answer 3

你去掉後<span></span>另做選擇的<p></p>內容和使用this想法，string = string.replace(/ +/g, ' ');

Answer 4

你真的要當心與正則表達式/ .replace接近這個問題：很容易替換你不想觸摸的各種文本。

的做法，可能有點「安全」：

• 找到你要刪除的<span>。
• 找到它的父元素。
• 檢查它是否是由文本節點（nodeType == 3）
• 如果有您要移除<span>前一個文本節點包圍，修剪空白的nodeValue結束。
• 如果元素後面有一個文本節點，請在其開頭處裁剪空白。

不過，我不相信你處理你的HTML和剝離東西的方式將是非常有前途的......內容的小改動會帶來新的問題。

一個例子（寫入要清楚，不簡潔）：

var spanToRemove = document.querySelector(".nestedSpan"); 
 
var spanParent = spanToRemove.parentElement; 
 
var childNodes = spanParent.childNodes; 
 
var childNodesArray = []; 
 

 
for (var i = 0; i < childNodes.length; i += 1) { 
 
    childNodesArray.push(childNodes[i]); 
 
} 
 

 
var spanIndex = childNodesArray.indexOf(spanToRemove); 
 
var textBefore = childNodes[spanIndex - 1]; 
 
var textAfter = childNodes[spanIndex + 1]; 
 

 
if (textBefore && textBefore.nodeType == 3) { 
 
    // Trims both ends, would be better to just trim right end 
 
    textBefore.nodeValue = textBefore.nodeValue.trim(); 
 
} 
 

 
if (textAfter && textAfter.nodeType == 3) { 
 
    // Trims both ends, would be better to just trim left end 
 
    textAfter.nodeValue = textAfter.nodeValue.trim(); 
 
} 
 

 
spanParent.removeChild(spanToRemove);

<p>Text before <span class="nestedSpan"> This gets removed </span> , Text after</p>