JavaScript: Как удалить теги с узла? - PullRequest
Новая
       21

JavaScript: Как удалить теги с узла?

3 голосов
/ 20 марта 2011

В предыдущем вопросе кто-то поставил меня на "ранги" 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);

            });

Что я действительно хотел бы сделать (может быть, это невозможно), это иметь некоторую "универсальную" функцию, которая удаляет ЛЮБОЙ элемент тега изузел, описанный выше, я пытаюсь сделать так:

  1. Получить диапазон - sel = rangy.getSelection();
  2. Превратить sel в строковую переменную var txt = sel.toString();
  3. Удалить содержимое - включая элементы a range.deleteContents();, затем
  4. Заменить удаленное на «текстовую» версию var replaceText = document.createTextNode (txt);sel.appendChild (replaceText);

Я получаю "пока" содержимое удалено, НО я не могу заставить "замену нового текста" функционировать.

Надеюсь, все ясно- потому что это не для меня;)

Ответы [ 2 ]

1 голос
/ 17 августа 2012

Я знаю старый вопрос, но у меня была та же проблема, и я нашел жизнеспособное решение здесь . 

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 ()важно, чтобы у вас не было нескольких смежных текстовых узлов.Это приводит к тому, что все текстовые узлы снова объединяются в один текстовый узел.

Для вашего точного вопроса вы можете перебрать все узлы и затем выполнить приведенный выше код.

0 голосов
/ 20 марта 2011

Вероятно, вам стоит посмотреть, как сделать вложенный выбор в 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('');
...