Манипуляции с Dom Nodes, как удалить теги, которые обертывают мой выбор? - PullRequest
Новая
       13

Манипуляции с Dom Nodes, как удалить теги, которые обертывают мой выбор?

4 голосов
/ 18 марта 2010

Я пытаюсь объяснить вам мою "проблему". Я хотел бы знать, когда я выбираю часть текста, если этот текст «обернут» тегами html и в функции удаляет их.

Например, с этим предложением:

Машина <strong> зеленая </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. Не могли бы вы помочь мне решить эту проблему?

Большое спасибо за вашу драгоценную помощь.

Ответы [ 3 ]

1 голос
/ 19 марта 2010

Проверьте этот пост для выбора метода, который выбирает информацию независимо от того, какой браузер это:

Выбор текста в элементе (сродни выделению мышью)

Я думаю, что если вы используете метод SelectText, он должен работать нормально, а не getSelection ()

Надеюсь, это поможет.

0 голосов
/ 20 апреля 2010

используя в основном 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>, и удалять их все.

Могу дать вам несколько идей, хотя я думаю. Rob

0 голосов
/ 18 марта 2010

Это должно работать так, как вы хотите, просто установив externalHTML (<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;
    } 
});
...