Dom 节点操作，如何删除包裹我的选择的标签？

Question

我试着向你解释我的“问题”。我想知道当我选择文本的一部分时，该文本是否被 html 标签“包裹”，并在功能中删除它们。

例如这句话：

汽车是绿色，船是黑色

如果我选择“ green”并单击一个按钮，我想验证绿色是否被 包裹（因为没问题），并在函数中删除 未删除的标签包含“绿色”。

我尝试过这样做，但是当我删除子节点并重新创建一个时，我的新节点为空，如果我尝试直接将文本放入 document.createTextNode 中，我的新节点会出现，但 标签保留。

// Bouton CLICK
    $('input[type=button].btn_transform').click(function(){

var selObj = window.getSelection();    
        var parent=selObj.anchorNode.parentNode;

        if (parent.nodeName=='STRONG'){       
           parent.removeChild(selObj.anchorNode);
            var theText = document.createTextNode(selObj);
            parent.appendChild(theText);             
        }
    });

我不是 DOM 操作专家。你能帮我解决这个问题吗？

非常感谢您的宝贵帮助。

Answer 1

查看这篇文章的选择方法，无论使用哪种浏览器都可以选择信息：

在元素中选择文本（类似于用鼠标突出显示）

我认为如果您使用 SelectText 方法，那么它应该可以正常工作，而不是 getSelection()

希望它有帮助。

Answer 2

只需将父级的outerHTML（green）设置为其innerHTML（green），它就应该按照您想要的方式工作，如下所示：

$('input[type=button].btn_transform').click(function(){ 

    var selObj = window.getSelection();     
    var parent=selObj.anchorNode.parentNode; 

    if (parent.nodeName=='STRONG'){        
        parent.outerHTML = parent.innerHTML;
    } 
}); 

Answer 3

主要使用 jQuery...

$(document).ready(function () {
        $("#btn_transform").click(function () {
            var selectedText = getSelText();
            var parentOf = $("strong:contains(" + selectedText + ")");
            $(parentOf).each(function () {
                if (this.tagName == "STRONG" || this.tagName == "strong") {
                    var theElement = $(this);
                    var itsText = $(this).text();
                    $(this).after(itsText);
                    $(this).remove();
                }
            });
        });
    });
    function getSelText(){
       // your chosen 'get selection' method...
    {

您可能遇到的唯一问题是，如果您选择多次出现的文本 - 因此该函数将匹配 标记之间包含的该文本的所有实例将它们全部删除。

我想可能会给你一些想法。
抢