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

#1

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>
1 Like
#2

không replace thẻ <br> sang </p><p> à

#4

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

#5

Làm gần được :wink:

<!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>
1 Like
#6

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>
1 Like
#7

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

@vhnam

#8

Làm được rồi :muscle:

<!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>
3 Likes
#9

Hell of a job.

Mà em thấy code trước của anh ổn rồi mà. Em đã push nó lên rồi

#10

code trước chưa đúng lắm.
Nên sáng ngồi suy nghĩ và tìm trên mạng cách giải quyết khác.

1 Like
#11

:cry: em cũng nghiên cứu mấy ngày mà không ra. Nhiều khi có cái tưởng đơn giản mà nó phức tạp chứ chẳng đùa

#12

anh cũng vậy. Nhìn vào tưởng đơn giản nhưng vào làm mới thấy khó. :joy:

1 Like
#13

a ơi, a giải thích mấy cái RegEx được không ạ?

#14

Bạn có thể dùng https://regex101.com/ để tự tìm hiểu :wink:

1 Like
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?