30/09/2018, 20:17

Ngắt trong thành các thẻ riêng lẻ với jQuery

Lâu lâu kẹt một vấn đề jQuery điên đầu thế này.

Biến

<p>foo<br>bar<br>baz</p>

Thành

<p>foo</p>
<p>bar</p>
<p>baz</p>

vũ xuân quân viết 22:21 ngày 30/09/2018

không replace thẻ   sang  à

Khoa Nguyen viết 22:26 ngày 30/09/2018

Hùm. Cái này chỉ là simple case thôi anh. Vì có nhiều br tag ở ngoài thẻ p không cần đụng đến

vũ xuân quân viết 22:22 ngày 30/09/2018

Làm gần được

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").each(function( index ) {
        console.log( index + ": " + $( this ).text() );
        console.log( index + ": " + $( this ).html() );
        var content = $( this ).html();    
        var count = (content.match(/<br>/g) || []).length;        
        for(var i = 0; i < count; i++){
            $(this).html(content.replace('br', 'p'));             
            content = $( this ).html();    
        }         
        console.log( index + ": " + $( this ).text() );
        console.log( index + ": " + $( this ).html() );
    });
    
});
</script>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>foo<br>bar<br>baz</p>


</body>
</html>

Võ Hoài Nam viết 22:20 ngày 30/09/2018

Bác thử làm theo cách trong hình được hông?

Demo ở đây.

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
</head>
<body>
    <p id="demo">foo<br>bar<br>baz</p>

    <script>
        var content = document.getElementById('demo').innerHTML;
        var paragraphs = content.split('<br>');
        var text = '';

        for (var i = 0; i < paragraphs.length; i++) {
            text +=  '<p>' + paragraphs[i] + '</p>';
        }

        console.log(text);

    </script>
</body>
</html>

Khoa Nguyen viết 22:17 ngày 30/09/2018

Cảm ơn bác @vhnam và @masoivn

@vhnam

Hùm. Cái này chỉ là simple case thôi anh. Vì có nhiều br tag ở ngoài thẻ p không cần đụng đến

vũ xuân quân viết 22:21 ngày 30/09/2018

Làm được rồi

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
     var pContentArray = [];
     var pContentChangeArray = [];
     var tempIndex = 0;
     $("p").each(function( index ) {       
        var content = $( this ).html();    
        var count = (content.match(/<br>/g) || []).length;
        if(count > 0){
           var tempContent = '<p>' + content + '</p>';
           var tempContentChange = tempContent
           pContentArray[tempIndex] = tempContent;
           console.log( tempContent );
           tempContentChange = tempContentChange.replace(/<br>\\*/g,"</p><p>");
           console.log( tempContentChange );
           pContentChangeArray[tempIndex] = tempContentChange
           index++;
        }
    });
    for    (index = 0; index < pContentArray.length; index++) {
        $('body').html($('body').html().replace(pContentArray[index],pContentChangeArray[index]));
    }     
});
</script>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>foo<br>bar<br>baz</p>
ksdf;lgkdslfgsdflk<br>
dfgjlkdfjdfgjk<br>

<p>foo<br>bar<br>baz<br>foo1<br>bar1<br>baz1</p>

</body>
</html>

Khoa Nguyen viết 22:22 ngày 30/09/2018