3

有没有一种好方法可以删除所有 SPAN 标签（同时保留其中的文本）并用 BR 替换所有 DIV 和 P？使用 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 问题作斗争，并且不能选择捕获某些 keydown，这需要完全跨浏览器有效并且带有返回（新行）、退格和删除按钮。

4

5 回答 5

5

这是我设法让它工作的方法，由 Raphaels 领导回答

        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);
            });
        }

我感觉这个嵌套业务可能占用了太多资源，有没有一种巧妙的方法来优化这个小代码块？

于 2013-10-24T15:46:16.653 回答
2

使用基本的 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);
});

希望这可以帮助！

于 2013-10-23T16:58:38.813 回答
2

你可以做这样的事情

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

于 2013-10-23T16:45:49.233 回答
-2

请尝试添加一个名为 parent 的 div 并编辑 html。

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

这可能会解决您的目的。至少给你一个想法。

于 2013-10-23T16:52:08.567 回答
-2

添加样式显示：inline-block；到 contenteditable，它不会在 chrome 中自动生成 div、p、span

于 2014-07-11T02:53:08.503 回答