JavaScript：如何從節點中刪除標籤？

在之前的問題中，有人把我帶到「rangy」http://code.google.com/p/rangy/。即使我沒有完全理解它也很有趣。我不是一個JavaScript人。然而，我已經設法做了大部分事情，除了1之外，我需要這個概念。這個概念是一個非常基本的RTE，只是粗體，斜體等。我管理它，創建了一個鏈接 - 也完成了它，好的。採取了一個JS小夥子2分鐘花了我幾個小時 - 令人沮喪，但我認爲我學到了一點 - 非常緩慢。總之，使用瘦長我可以創建（藉口差代碼）一個href鏈接這樣的：JavaScript：如何從節點中刪除標籤？

$('#linkbut').live('click',function(){ 
     var sel = rangy.getSelection();  
     var range = sel.getRangeAt(0); 
     range.splitBoundaries(); 
     var textNodes = range.getNodes([3]); 
      for (var i = 0, len = textNodes.length; i < len; ++i) { 
      var newLink = document.createElement('a'); 
      newLink.setAttribute('href','test.html'); 
      var linkText = document.createTextNode(sel); 
      var parent = textNodes[i].parentNode; 
      parent.insertBefore(newLink,textNodes[i]); 
      newLink.appendChild(linkText); 
      range.deleteContents(); 
      } 
    });

#linkbut是一個簡單的HTML按鈕和上述的實際HREF（的test.html）將來自一個輸入字段的值而不是「硬編碼」。但我無法完成的是刪除鏈接，如果我想刪除它。

進一步解釋：一旦鏈接被創建我可能想要刪除它，所以我嘗試了上面的代碼中的「反轉」 - 顯然沒有好，所以已經得到了「這一步」：

$('#deletelink').live('click',function(){ 
       var sel = rangy.getSelection();  
       var range = sel.getRangeAt(0); 
       range.splitBoundaries(); 
       var textNodes = range.getNodes([3]); 
       var txt = sel.toString(); 
       range.deleteContents(); 
       var replaceText = document.createTextNode(txt); 
       sel.appendChild(replaceText); 

      });

我真的想這樣做（可能是不可能的），是有一些「通用」功能，從上面的什麼，我試圖做一個節點刪除任何標記的要素是：

獲取範圍 - sel = rangy.getSelection();
將「sel」int o一個字符串變量var txt = sel.toString();
刪除該內容 - 包括a元件range.deleteContents(); 然後
替換爲「文本」的版本變種replaceText = document.createTextNode（TXT）的刪除; sel.appendChild（replaceText）;

我得到「迄今爲止」的內容被刪除，但我無法獲得「新文本替換」的功能。

希望一切都清楚 - 因爲這一切對我來說並不）

來源

2011-03-20 Russell Parrott

你爲什麼不做element.html（「」）？或者我不理解你的問題？ – mattsven 2011-03-20 15:04:50

@NeXXeuS - 現在你讓我完全困惑:)我甚至不知道如何，但重點是有可能在一篇文章中有很多鏈接，但我只想刪除選定的鏈接 – 2011-03-20 15:08:38

你或許應該查找關於如何做嵌套選擇在jQuery和作爲NeXXeuS說你應該考慮通過去除的.html的內容（）在你選擇的方法上。

如果您有：

<div id="mydiv"></div>

並運行：`

$('#mydiv').append('<a href="test.html">Test Link</a>');

的HTML看起來像：

<div id="mydiv"><a href="test.html">Test Link</a></div>

您可以在此選擇與鏈接：

$('#mydiv a');

您可以通過執行刪除：

$('#mydiv').html('');

來源

2011-03-20 15:23:35

JQuery - 這真是太棒了點，它的問題是，它會「預先」或「追加」我不能讓它做插入「光標」 - 因此使用類似rangy，這不是一個textarea這是一個帶#ID的純「div」，太多嵌套使輸出非常醜陋的HTML，sooooo在後端清理很多。現在，如果有使用JQ插入光標的方法 - 我會微笑 – 2011-03-20 15:42:40

我知道一個老問題，但我有同樣的問題，並找到可行的解決方案here。

var el = document.getElementsByTagName('span')[0]; // Get the element in question 
var pa = el.parentNode; 

while(el.firstChild) { 
    pa.insertBefore(el.firstChild, el); 
} 

pa.removeChild(el); 
pa.normalize();

編輯：這樣你就不會有一堆相鄰的文本節點的正規化（）方法是很重要的。它會導致所有文本節點再次聚合到一個文本節點中。

對於你確切的問題，你可以迭代所有的節點，然後執行上面的代碼。

來源

2012-08-16 20:15:35 TPoschel

JavaScript：如何從節點中刪除標籤？

回答

相關問題