Search code examples
jquerydomtextrange

Can jQuery work with partial elements? (ranges)


Is it possible for jQuery to work with partial elements (aka ranges)? Probably not, but does anyone know any plugins? - or would anyone like to collaborate with me on making such a plugin?

Essentially, this is the functionality I'm after:

var $el = $('<div>a b c d</div>');

$el.range(2,3).wrap('<strong>');
console.log($el.html()); // a <strong>b</strong> c d

$el.range(4,5).addClass('super');
$el.range(4,5).addClass('awesome');
console.log($el.html()); // a <strong>b</strong> <span class="super awesome">c</span> d

$el.range(2,5).addClass('shweet');
console.log($el.html()); // a <span class="shweet"><strong>b</strong> <span class="super awesome">c</span></span> d

$el.range(2,5).start; // 2
$el.range(2,5).finish; // 5

$el.range(); // returns $el

$el.selection(); // returns the partial element (aka range) for the current selection
$el.selection(2,5); // would select 'b c', and return their partial element (aka range)

$el.currentLine(); // returns the partial element (aka range) for the current line

Should also work exactly the same on textareas.

Answer can be in either coffeescript or javascript.

Changelog:

  • Added $el.selection()
  • Added $el.currentLine()

Solution

  • Here there is an attempt of doing the plugin. The only problem is that after the first call to .range some HTML is added, so for the next call chars from 4 to 5 won't be the same. Still looking for some way to resolve that issue.

    Update

    I've changed the plugin A LOT. Now it is not very pretty but it works. Watch it working here.

    All the .spanAddedRange are really are necessary because they must be added with the original html and in that moment you can't know the values that will be use to call .range method.

    Update

    Now succeeded by the Slices functionality in the HTML5 Edit project