使用jQuery来限制数量 字符为2，然后在第二个后包装所有文本 新div的角色

Question

我正在处理专有的内容管理系统，该系统在客户端添加的页面上吐出数据，但为了不破坏页面的布局，需要以非常具体的方式处理。该内容看起来像这样：

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

请注意，此内容是动态的，但它始终具有相同的基本格式...名称，作业标题，然后是一些换行符，然后是简短的声明。首先，我需要有两个换行符。因此，如果jQuery只看到一个换行符，它应该在它后面添加另一个换行符。如果它看到三个换行符（如本例所示），则应删除第三个换行符。在jQuery执行此操作之后，我希望它在第二个换行符后包装所有文本，但在div结束之前，在一个带有to-remove类的新容器中...所以这基本上就是描述部分。原因是因为在某个断点处，我需要描述文本消失。我希望实现的是这样的：

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

请注意，已删除一个换行符（因此有两个换行符），并且第二个换行符后的所有文本都已包装在新容器中。由于我不知道如何实现这一点，我没有任何jQuery代码可以展示，但如果有人知道如何做到这一点并且可以在这里展示，我真的很感激。

Answer 1

我不确定你是否正在寻找一个解决方案来工作或帮助使用jquery（我可以提供）的可能算法。

我会以一种最容易理解的方式执行以下操作：

1. 使用（“.description”）循环所有类描述。每个（...）
2. 如果没有足够的数量加上一个，过多地使用这些函数删除它们： （寻找文件）.find("br") (and .find().length) ? .insertAfter() : .remove
3. 选择剩余的文本并将其插入新的div中 .append('<div class="to-cut"> </div>')

祝好运 ！

Answer 2

通常情况下，我不会回应，因为你没有表现出任何努力，只是要求别人给你一个免费的解决方案。但是我有心情解决这个简单的练习问题。

但它将始终具有相同的基本格式

如果是这样，就不需要正则表达式或花哨的东西，只需DOM操作：

var description = document.getElementsByClassName('description')[0],
    // if there is only one, you'd need a better selector in your case probably
    children = description.childNodes,
    br = 0, lastBr, div;

for(var i = 0, l = children.length; i < l; i++) { // loop over all nodes in description
    if(children[i].nodeType === 1 // if it is an Element
       && children[i].tagName === 'BR') { // if it is <br>
        br++; lastBr = children[i]; // for later use
        if(br > 2) { // remove unwanted
            description.removeChild(children[i]);
            i--; l--; // reset counter
        }
    }
    if(i > 0 && children[i].nodeType === 3 // not the first text node
       && children[i].textContent.trim().length > 0) { // and not empty
        div = document.createElement('div'); // create the div
        div.className = 'to-cut'; // give it a class
        div.appendChild(children[i]); // transfer text content
        description.appendChild(div); // put it in
    }
}

if(br < 2) { // add new <br> when necessary
    description.insertBefore(document.createElement('br'), lastBr); // add it before the one
}

Answer 3

$('.description').html($('.description')
        .html()
        .replace(/(\r\n|\n|\r)/gm,"")
        .replace(/\s{2,}/g, ' ')
        .split('<br>')
        .filter(function(e) { return e.trim() !== ''; })
        .join('<br><br><div class="to-cut">') + "</div>");

http://jsfiddle.net/7bfqub0w/1/

Answer 4

请注意，此内容是动态的，但它始终具有相同的基本格式

假设该语句为真，则以下方法可行：

$(document).ready(function () {
    $(".description").each(function () {
        var title = $(this).html().split('<br>')[0].trim();
        var cleanedEl = $(this).find('br').remove();
        var toCut = $(this).html().replace(title, '');
        $(this).html(title + '<br><br><div class="to-cut">' + toCut + '</div>');
    }); // end description each
});

请参阅jsfiddle上的工作示例