JS - 不刪除內容

我想知道是否可以刪除標籤，但留下的機智內容刪除標籤？例如，是否可以刪除SPAN標籤但將SPAN的內容留在那裏？JS - 不刪除內容

<p>The weather is sure <span>sunny</span> today</p> //original 

<p>The weather is sure sunny today</p> //turn it into this

我一直在使用使用replaceWith（）的this方法試過了，但它變成HTML到

<p> 
    "The weather is sure " 
    "sunny" 
    " today" 
</p>

編輯：測試你的答案後，我意識到，我的代碼有過錯。我不斷收到三個分割文本節點的原因是由於插入了SPAN標籤。我會創建另一個問題來解決我的問題。

來源

2012-03-24 Jon

$（」內容（）。unwrap（） [1]：http://stackoverflow.com/questions/2308366/remove-element-with-jquery-but-leave-text – 2012-03-24 01:56:28

如何使用innerHtml？它是否給出相同的結果？ – 2012-03-24 02:00:29

可能的重複[如何使用jQuery解開文本？]（http://stackoverflow.com/questions/2409117/how-to-unwrap-text-using-jquery） – Joseph 2012-03-24 02:00:31

jQuery有更簡單的方法：

var spans = $('span'); 
spans.contents().unwrap();

有了不同的選擇方法，有可能去除嵌套的深度跨度或者直接引導子元素的跨度。

來源

2012-03-24 02:17:41 user1106995

這只是三個文本節點，而不是一個。它不會產生明顯的不同嗎？

如果這是一個問題，使用DOM normalize方法把它們混合起來：

$(...)[0].normalize();

來源

2012-03-24 01:56:26

是的，它對我的目的有所不同。我正在存儲原始的DOM結構。使用replaceWith（）稍微改變DOM結構，所以我的代碼現在崩潰:( – Jon 2012-03-24 01:57:41

$(function(){ 

    var newLbl=$("p").clone().find("span").remove().end().html(); 
    alert(newLbl); 

});

例子：http://jsfiddle.net/7gWdM/6/

來源

2012-03-24 02:00:41 Shyju

有幾種方法可以做到這一點。 jQuery是最簡單的方法：

//grab and store inner span html 
var content = $('p span').html; 
//"Re"set inner p html 
$('p').html(content);

的JavaScript可以做到使用element.replace相同。（我不記得了正則表達式做一舉取代，但是這是最簡單的方式）

paragraphElement.replace("<span>", ""); 
paragraphElement.replace("</span>", "");

來源

2012-03-24 02:03:45

<p>The weather is sure <span>sunny</span> today</p>; 


var span=document.getElementsByTagName('span')[0]; // get the span 
var pa=span.parentNode; 
while(span.firstChild) pa.insertBefore(span.firstChild, span); 

pa.removeChild(span);

來源

2012-03-24 02:22:05 kennebec

如果你不是在尋找一個jQuery解決方案，這裏有一些輕量級的東西，專注於你的場景。

我創建了一個名爲getText()功能，我用它遞歸。總之，你可以得到你p元素的子節點和檢索p節點中的所有文本節點。

只是在DOM的一切都是某種類型的節點。在下面的鏈接我擡頭髮現，文本節點有3數值nodeType值，當您發現您的文本節點，你會得到他們的nodeValue並返回它要連接到整個非文本自由節點值。

https://developer.mozilla.org/en/nodeType

https://developer.mozilla.org/En/DOM/Node.nodeValue

var para = document.getElementById('p1') // get your paragraphe 
var texttext = getText(para);    // pass the paragraph to the function 
para.innerHTML = texttext     // set the paragraph with the new text 

function getText(pNode) { 

    if (pNode.nodeType == 3) return pNode.nodeValue; 

    var pNodes = pNode.childNodes  // get the child nodes of the passed element 
    var nLen = pNodes.length    // count how many there are 
    var text = ""; 

    for (var idx=0; idx < nLen; idx++) { // loop through the child nodes 
     if (pNodes[idx].nodeType != 3) { // if the child not isn't a text node 
      text += getText(pNodes[idx]); // pass it to the function again and 
              // concatenate it's value to your text string 
     } else { 
      text += pNodes[idx].nodeValue // otherwise concatenate the value of the text 
              // to the entire text 
     } 

    } 

    return text 
}

我還沒有適合所有情況的測試，這一點，但它會爲你此刻在做什麼。它比替換字符串稍複雜一點，因爲您正在查找文本節點，而不是硬編碼以刪除特定的標記。

祝你好運。

來源

2012-03-24 03:00:50 dmbania

如果有人還在尋找那個，那個爲我工作過的完整的解決方案是：

假設我們有：

<p>hello this is the <span class="highlight">text to unwrap</span></p>

的JS是：

// get the parent 
var parentElem = $(".highlight").parent(); 

// replacing with the same contents 
$(".highlight").replaceWith( 
    function() { 
     return $(this).contents(); 
    } 
); 

// normalize parent to strip extra text nodes 
parentElem.each(function(element,index){ 
    $(this)[0].normalize(); 
});

來源

2013-11-14 17:17:30 Andrea

JS - 不刪除內容

回答

相關問題