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

Question

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

以这句话为例：

车是<strong>green</strong>，船是黑色的

如果我选择“绿色”并点击一个按钮，我想验证绿色是否被<strong>包裹（因为它没关系），并在函数中删除<strong>标签而不删除包含“绿色”的标签。

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

// 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

主要使用 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...
    {

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

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

Answer 2

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

Selecting text in an element (akin to highlighting with your mouse)

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

希望对你有帮助。

Answer 3

只需将父级的outerHTML (<strong>green</strong>) 设置为它的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;
    } 
});