Question

在之前的一个问题中，有人让我“笨拙”http://code.google.com/p/rangy/。即使我不完全理解它也很有趣。我不是一个JavaScript人。然而，除了1之外，我已经设法用它做了大部分事情。这个概念是一个非常基本的RTE，只是大胆，斜体等等。我管理了这个，创建了一个链接 - 完成了，确定可能有什么采取一个JS家伙2分钟花了我几个小时 - 令人沮丧，但我想我正在学习一点 - 非常慢。无论如何，使用rangy我可以创建（借口可怜的代码）像这样的href链接：

$('#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”变为字符串变量var txt = sel.toString();
删除内容 - 包括a元素range.deleteContents(); 然后
将删除的内容替换为“text”版本var replaceText = document.createTextNode（txt）; sel.appendChild（replaceText）;

我得到“到目前为止”内容被删除但是我无法让“新文本替换”起作用。

希望一切都清楚 - 因为它不适合我;）

Answer 1

我知道一个老问题，但我遇到了同样的问题并找到了可行的解决方案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();

编辑： normalize（）方法很重要，因此您没有一堆相邻的文本节点。它会导致所有文本节点再次聚合到一个文本节点中。

对于您的确切问题，您可以迭代所有节点，然后执行上面的代码。

Answer 2

您应该查看如何在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('');

JavaScript：如何从节点中删除标签？

2 个答案: