Use jQuery to limit number of <br> characters to 2 and then wrap all text after second <br> character with new div

Question

I'm dealing with a proprietary content-management system, which spits out data on a page that the client has added, but in order to not break the layout of the page, it needs to be handled in a very specific way. That content looks something like this:

<div class="bio">
    <div class="title">Jane Doe</div>
    <div class="description">
        Founder
        <br>
        <br>
        <br>
        Jane has 12 years' experience running a syndicated talk-show about 
        being an esteemed career-woman.
    </div>
</div>

Note that this content is dynamic, but it will always have the same basic format...a name, then a job title, then some number of line breaks, and then a brief statement. First of all, I need for there to be exactly two line breaks. So if jQuery sees just one line break, it should add another one right behind it. If it sees three line breaks (as in this case), it should remove the third one. After jQuery does that, I'd like it to wrap all of the text after the second line break, but before the end of the div, in a new container with a class of to-remove...so that would basically be the description portion. The reason for that is because at a certain breakpoint, I need the description text to go away. What I'm hoping to achieve is something like this:

<div class="bio">
    <div class="title">Jane Doe</div>
    <div class="description">
        Founder
        <br>
        <br>
        <div class="to-cut">
            Jane has 12 years' experience running a syndicated talk-show 
            about being an esteemed career-woman.
        </div>
    </div>
</div>

Note that one line break has been removed (so that there are two) and that all of the text after the second line break has been wrapped in a new container. As I've no idea whatsoever how to achieve this, I don't have any jQuery code to show, but if anyone knows how to do this and can lay it out here, I'd really appreciate it.

Answer 1

I'm not sure if you are looking for a solution to be working or help on a possible algorithm with jquery (that I can provide).

I would do as follow in a most understandable way :

1. loop on all the class description using (".description").each(...)
2. count the number of < br > if not enough add one, too much remove them using the functions:
   (look for the doc) .find("br") (and .find().length) ? .insertAfter() : .remove
3. select the remaining text and insert it inside a new div
   .append('<div class="to-cut"> </div>')

Good luck !