如何在某些元素后将文本包装在div中

Question

I'd like to be able to wrap a div around some text after the first BR in the text.

So this is how it would look in the CMS for example:

<div class="quote">
<p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget ligula scelerisque, tempor justo non, pretium eros. Duis luctus pulvinar posuere. Nunc quam dui, tempor eu tincidunt et, pulvinar at quam.<br /><br />

        Sed congue nisl eget libero mollis, a rhoncus odio sollicitudin. Cras aliquet mi vel diam elementum, ac vestibulum ligula imperdiet. Nulla facilisi. Praesent vestibulum nisi odio, sed scelerisque diam molestie vitae..<br /><br />

    Sed rhoncus purus eu metus elementum hendrerit. Sed scelerisque sodales eros vel tempus. Morbi tempor risus condimentum, sagittis turpis vel, auctor odio. Fusce sed lorem non dolor fringilla accumsan. Proin metus lectus.<br /><br />

    Donec malesuada elit quis nunc ultrices dictum. Nulla quis tortor sed quam aliquet tempor. Duis porta nunc non augue fermentum rutrum. Morbi imperdiet justo et est pellentesque, sed consequat neque ultricies..<br />
    </p>
</div>

and I'd like the jQuery to add a div after the first BR - so it looks like:

<div class="quote">
    <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget ligula scelerisque, tempor justo non, pretium eros. Duis luctus pulvinar posuere. Nunc quam dui, tempor eu tincidunt et, pulvinar at quam.<br />
<div id="space">
<br />

            Sed congue nisl eget libero mollis, a rhoncus odio sollicitudin. Cras aliquet mi vel diam elementum, ac vestibulum ligula imperdiet. Nulla facilisi. Praesent vestibulum nisi odio, sed scelerisque diam molestie vitae..<br /><br />

        Sed rhoncus purus eu metus elementum hendrerit. Sed scelerisque sodales eros vel tempus. Morbi tempor risus condimentum, sagittis turpis vel, auctor odio. Fusce sed lorem non dolor fringilla accumsan. Proin metus lectus.<br /><br />

        Donec malesuada elit quis nunc ultrices dictum. Nulla quis tortor sed quam aliquet tempor. Duis porta nunc non augue fermentum rutrum. Morbi imperdiet justo et est pellentesque, sed consequat neque ultricies..<br />
</div>
        </p>
    </div>

I've currently got this far with my jQuery:

$('.quote p br').wrapAll('<div id="space"></div>');

but this just grabs all the br's and adds them together in the div not the rest of the text.

JS Fiddle here: http://jsfiddle.net/2pQ4r/

Answer 1

Since you are dealing with text nodes also, the element selectors will not work, you need to deal with .contents(). So one way is to find the index of first br element in the contents of quote then find all elements after that and wrap them within a div like

$('.quote').each(function () {
    var $contents = $(this).find('p').contents(),
        $br = $(this).find('p br:first'),
        index = $contents.index($br);

    $contents.slice(index + 1).wrapAll('<div id="space"></div>');
});

Demo: Fiddle

Answer 2

I know you found an answer. I'm gonna leave mine below, just in case someone doesn't want to use all that fancy good-looking jQuery. It assumes your browser has Element.querySelector and Array.forEach

(function () {
  function unconventionalMigrator(p) {
    var child, next, div;
    // get first br Element
    child = p.querySelector('br');
    // get nextSibling
    next = child = child.nextSibling;
    // make new div element to migrate children
    div = document.createElement('div');
    div.id = 'space';// IMPLEMENTATION SPECIFIC
    // migrate children
    while (child) {
      next = child.nextSibling;// save next
      div.appendChild(child);  // move current
      child = next;            // set next
    }
    // append new div Element
    p.appendChild(div);
  }
  // get p Element
  [].forEach.call(document.querySelectorAll('.quote p'),unconventionalMigrator);
}())

Answer 3

This wrapps only the first text node before <br /> , like you wanted (using jQuery's map function):

var brs = $('.quote p br');
var nodes = brs.map(function(){
    return this.previousSibling;
});

if ( nodes.length ) {
    var firstNode = nodes[0];
    var oldText = firstNode.nodeValue;
    firstNode.nodeValue = "";
    $(firstNode).parent().prepend("<div style=\"border: 1px solid black;\">" + oldText + "</div>");
}

Fiddle

If you really want the element after first node (as you stated), then just use this instead of last line (but I think that you meant 1st paragraph):

brs[0].remove();
$(firstNode).parent().prepend(
    "<div style=\"border: 1px solid black;\">"
    + oldText
    + "</div><br />"
);

Answer 4

This should help you:

Use this code: http://jsfiddle.net/2pQ4r/

Just wrap your text first in some container like span. And then use: $('.quote p br').next().wrapAll('<div id="space"></div>');