помощью jQuery удалить теги, сохраняя свое содержание (а:с)

Есть ли хороший способ удалить все теги SPAN (сохраняя при этом текст внутри них) и заменить все DIVs и P на BR? С помощью jQuery?

<div>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum tincidunt urna ac dignissim. Phasellus nisi ante, pharetra at
 <span>&nbsp;lorem a, condimentum ullamcorper</span>
 <span>&nbsp;leo. Duis pharetra nulla sit amet dui feugiat luctus.</span>
</p>
<p>
 <span>Ut eget nulla pulvinar ligula tincidunt placerat ut in eros. Cras posuere eget lacus eu lacinia. Cras lacinia porta porta. In hac habitasse platea dictumst. Maecenas nibh ligula, vulputate ut suscipit congue, euismod sed nunc. Cras quis rhoncus justo, sit amet vulputate enim.</span>
</p>
</div>

Я борюсь с проблемой contentEditable, и захват определенных клавиш не является опцией, это должно быть полностью кроссбраузерно допустимым и issu с помощью кнопок return (new lines), backspace и delete.

5 2
javascript html jquery edit replace

5 ответов:

Вот как мне удалось заставить его работать, во главе с Рафаэлем ответом 

        if( $(textObject).children().length > 0 ) {
            $(textObject).children().each(function() {

                if ( $(this).is("span") ) {
                    $(this).contents().unwrap();
                }
                else if ( $(this).is("div") || $(this).is("p") ) {
                    $(this).prepend('<br />').contents().unwrap();
                }

                restoreTextFormat(this);
            });
        }

У меня такое чувство, что этот вложенный бизнес, возможно, занимает слишком много ресурсов, хотя, есть ли аккуратный способ оптимизировать этот маленький блок кода?

5

Вы можете сделать что-то подобное 

//remove all span tags, keeping the content
$('span').contents().unwrap();
//add a br at the start of each p or div, then remove p or div 
//use append instead of prepend to add the  line break at the end, not at the start.
$('p, div').prepend('<br />')
           .contents().unwrap();

См. jsFiddle

2

Используя basic VanillaJS: 

// this function does the hard work for us
function unwrap(root,tagname,extra) {
    var elms = root.getElementsByTagName(tagname), l = elms.length, i;
    for( i=l-1; i>=0; i--) {
        // work backwards to avoid possible complications with nested spans
        while(elms[i].firstChild)
            elms[i].parentNode.insertBefore(elms[i].firstChild,elms[i]);
        if( extra) extra(elms[i]);
        elms[i].parentNode.removeChild(elms[i]);
    }
}

// assumes "container" is a pointer to your container, such as from
// using document.getElementById('container') or similar
unwrap(container,"span"); // remove all spans, preserving their content
unwrap(container,"div",function(elm) {
    elm.parentNode.insertBefore(document.createElement('br'),elm);
});
unwrap(container,"p",function(elm) {
    elm.parentNode.insertBefore(document.createElement('br'),elm);
});

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

2

Пожалуйста, попробуйте добавить div с именем parent и отредактировать html.

$(this).find('#parent').html($(this).find('#parent').html().replace('<div>', '').replace('</div>', '<br/>').replace('<p>', '').replace('</p>', '<br/>').replace('<span>', '').replace('</span>', ''));

Это может решить вашу цель. По крайней мере, дать вам представление.

-2

Добавить стиль отображения: inline-block; чтобы contenteditable, он не будет генерировать div, p, span автоматически в chrome

-2