Wrap text with any tags except div with Jquery?

Question

I have a problem with a text: cannot wrap anything except div children. Here is my problem: - I use PHPBB forum. Comments texts not wrap any container, I have just plain text. - I need text-indent to every paragraph - Comments text include img, strong and many html tags, include divs (like quotes).

What I think, I'd like: - wrap text to a span (because I can use inline-block indent) with any html tag, exclude div - delete duplicated br tags, just use one br tag only

I made two way for solution, but have a few problem with these solutions.

HTML code:

    Itt van a sima szöveg, ami jó hosszú és ezt kellene spanba zárni
    valaki írta:
    
        Másvalaki írta:
        No meg ezt sem...
            

             http://m.youtube.com/watch?v=Dp_nePvLZQ ... 3Dyoutu.be

            
        
        
Ez tök jó! ez idézet
    
Ez is tuti! Ez nem idézet, ezt is spanolni kell.
    

    

    
Lorem Ipsum constituam ad; Illum philosophia accusata id solum vocent 
oportere corrumpit habemus donec minim offendit tritani tempus risus 
sociis maecenas? Usu maiestatis exerci pellentesque exerci! Essent; 
Sea intellegebat suspendisse puto ctas? Oblique? Solum elit mundi libris
aliquet similique dolore sapientem interdum dis elaboraret volutpat 
diam interdum agam docendi primis.
    

Lorem Ipsum expetenda etiam! Voluptua pellentesque cu feugiat intellegat
ignota. Autem saperet percipitur voluptua omnis conceptam epicuri 
eligendi option aliquyam impedit nam scelerisque semper integer postea
homero ultrices curae adipisci soluta pericula quo? Sint! Puto deseruisse
diceret eripuit atqui assentior pulvinar altera posidonium detracto, 
tractatos? Constituam dicat convallis perpetua fastidii

CSS code:

.postbody {
    padding: 5px 15px;
    text-align: justify;
}    
.quotetitle {
        margin: 10px 5px 0 5px;
        padding: 4px;
        border-width: 1px 1px 0 1px;
        border-style: solid;
        border-color: #A9B8C2;
        color: #333333;
        background-color: #A9B8C2;
        font-size: 0.85em;
        font-weight: bold;
    }
    .quotecontent {
        margin: 0 5px 10px 5px;
        padding: 5px;
        border-color: #A9B8C2;
        border-width: 0 1px 1px 1px;
        border-style: solid;
        font-weight: normal;
        font-size: 1em;
        line-height: 1.4em;
        font-family:"Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
        background-color: #FAFAFA;
        color: #4B5C77;
    }
    .firstline {
        text-indent: 1.1em;
        display:inline-block;
    }

JQuery code (First solution): http://jsfiddle.net/mykee/9VpjP/29/

    $('.postbody').each(function(){
    var container = $(this);

    container.contents().filter(function() {
      return this.nodeType == 8;
    }).remove();

$("div.quotecontent br").remove();

if (container.filter("div", "a")){
    var html = container.html().split('
');
    container.html("");
    for(var i in html)
    {
        if($.trim(html[i]))
            container.append(''+html[i]+"");
    }
//   $(".firstline > a").unwrap(); 
   $(".firstline > div").unwrap();
}

});

JQuery code (Second solution): http://jsfiddle.net/mykee/2AByk/12/

$('.postbody')
    .contents()
    .filter(function () {
    return this.nodeType === 3;
})
    .wrap(function () {
    return $("").addClass("firstline");
})
    .end();

$("span.firstline div").unwrap();
$("span.firstline").filter(function () {
    return $.trim($(this).html()) === '';
}).remove();

$('.postbody br').each(function () {
    if ($(this).next().is('br')) {
        $(this).next('br').remove();
        $(this).next('br').remove();
    }
});

My problem with first solution: split working with all content, and trim my div. If div include any br tag, then div container will wrong after unwrap. I put a remove to div for br tag, but this not solution :( With second solution my problem is with filter nodeType: just plain text will wrapped to span, img or strong or any other html tag will outside span.

I need this results:

    
    Itt van a sima szöveg, ami jó hosszú és ezt kellene spanba zárni
    valaki írta:
        
            Másvalaki írta:
            No meg ezt sem...
                

                 http://m.youtube.com/watch?v=Dp_nePvLZQ ... 3Dyoutu.be

                
            
            
Ez tök jó! ez idézet
    Ez is tuti! Ez nem idézet, ezt is spanolni kell.
    Lorem Ipsum constituam ad; Illum philosophia accusata id solum vocent 
oportere corrumpit habemus donec minim offendit tritani tempus risus 
sociis maecenas? Usu maiestatis exerci pellentesque exerci! Essent; 
Sea intellegebat suspendisse puto ctas? Oblique? Solum elit mundi libris
aliquet similique dolore sapientem interdum dis elaboraret volutpat 
diam interdum agam docendi primis.
Lorem Ipsum expetenda etiam! Voluptua pellentesque cu feugiat intellegat
ignota. Autem saperet percipitur voluptua omnis conceptam epicuri 
eligendi option aliquyam impedit nam scelerisque semper integer postea
homero ultrices curae adipisci soluta pericula quo? Sint! Puto deseruisse
diceret eripuit atqui assentior pulvinar altera posidonium detracto, 
tractatos? Constituam dicat convallis perpetua fastidii

What's hard: this one post, and I have more post on one page. I use now first solution, but not a better.

How can I except any div in div.postbody, but wrap and indent first line on other texts?

Wrap text with any tags except div with Jquery?

Answers (1)

Related Questions