Question

I have this simple markup:

<p> some content here </p>

I want to break it into

<p> some </p> content <p> here </p>

using javascript (or with jQuery help).
I want to break html p tag, so that my particular word (for example content) will be out of the p. I want to find cross browser and efficient solution.
Thanks in advance.

Answer 1

(function () {
  $.fn.extend({
    splitAt: function (splitter) {
      this.each(function () {
        var $replacement = $(), $org = $(this);

        $.each($org.text().split(splitter), function (_, val) {
          $replacement = $replacement.add($org.clone().html(val)).add(document.createTextNode(splitter));
        });

        $org.replaceWith($replacement.slice(0, -1));
      });

      return $(this.selector, this.context);
    }
  });
}(jQuery));

$('p').splitAt('content').css('background', 'lightblue');
​

demo: http://jsfiddle.net/hSQ2m/6/