2

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()
balupton
  • 47,113
  • 32
  • 131
  • 182
  • Your examples are inconsistent. Shouldn't the `super` class be added to the 4th element i.e. `d` -- what does the `5` mean in your examples as there isn't a 5th element? Also what's the reason for doing this, is it some kind of experiment? – Gary Green Jun 07 '11 at 12:16
  • 1
    @Gary Green: I think that the 4 is the start-char-index and the 5 is the end-char-index. Something like substr but instead of giving the length you give the end index. – Diego Jun 07 '11 at 12:21
  • @Diego is correct, the first and second number refer to the start and finish of the `.text()` - sorry for the confusion @Gary – balupton Jun 07 '11 at 12:47

1 Answers1

3

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

Community
  • 1
  • 1
Diego
  • 16,436
  • 26
  • 84
  • 136
  • Yep. That is where it starts to get difficult. My thought is that you can either somehow map `.text` to `.html`, or have to go node by node scanning for textNodes, or ...? – balupton Jun 07 '11 at 12:55
  • Maybe you could of used `document.createTextNode` and `jQuery.contents()` to help instead of spans – Gary Green Jun 07 '11 at 13:19
  • @Gary Green: If I use text nodes then I can't use .filter. Watch here: http://jsfiddle.net/paska/YHYFa/ – Diego Jun 07 '11 at 13:41
  • You can't filter textnodes using a selector `*` you have to use a function like so: http://jsfiddle.net/garreh/YHYFa/1/ – Gary Green Jun 07 '11 at 14:03
  • @Gary Green: Didn't knew, thanks!! But still not a good idea using text nodes watch my problem here: http://jsfiddle.net/paska/ANvbN/9/ I'm not able to addClass to a text node. – Diego Jun 07 '11 at 14:20
  • @Diego, your efforts on this ROCK! and are much appreciated. If you want, you can add me on Skype (username balupton) and we can hack away at this together :) With your solution [here](http://jsfiddle.net/paska/ANvbN/8/) there is a lot of .rangeAddedSpans which I wonder if they are really necessary? - Selections would be the hardest part of all this. Ultimately, this code is crucial for making the `contenteditable` useful for everyone :) – balupton Jun 07 '11 at 15:22
  • @balupton: You are welcome. I would add you on skype but I'm just helping in my little free times at work. Also the rest of stackoverflow users wont know what we found out. About the .rangeAddedSpans now I'll update my answer explaining. – Diego Jun 07 '11 at 15:35
  • Accepting this as the answer, as I used @Diego's concept as the basis of my plugin - will release my work once it's gotten stable :) Thanks @Diego :) – balupton Jun 09 '11 at 14:14
  • Hey @Diego, you can find my project here: https://github.com/balupton/html5edit and the discussion on the element partials functionality here https://github.com/balupton/html5edit/wiki/Slices – balupton Jun 12 '11 at 00:58