2

how to make selected text stay surrounded by a span without breaking any Tag-element (javascript)

one exaple:

original text:

<p> a foo </p>
<p> another bar </p>

selected:

a foo
another bar

I do not want break the html nesting structure:

 <p> a fo<span>o </p>
<p> anoth</span>er bar </p>

I need something like this:

 <p> a fo<span>o </span></p>
 <p> <span>anoth</span>er bar </p>
Martin
  • 1,282
  • 1
  • 15
  • 43
  • 1
    Is there a good reason why hello how are you? can't be used? It's valid HTML. – ThatSteveGuy Oct 11 '12 at 18:50
  • 2
    yes it is valid html,what I do not want to is it: hello how are yo , for example – Martin Oct 11 '12 at 18:53
  • Take a look at [rangy](http://code.google.com/p/rangy/), it uses a combination of wrapper elements and classes to achieve something similar ([example](http://rangy.googlecode.com/svn/trunk/demos/cssclassapplier.html)) – bfavaretto Oct 11 '12 at 19:07
  • yes, if I've seen rangy, but I will not use it because it dont do that i need , I need save this html in a server for seen later . – Martin Oct 11 '12 at 19:16
  • Grabbing the HTML is just a matter of getting the `innerHTML` of the container element, I still believe rangy would save you some time... – bfavaretto Oct 11 '12 at 20:06

3 Answers3

2

It's not possible. Imagine this:

<p> a foo </p>
<p> another bar </p>

resulting in:

a foo
another bar

Now if a user selects only a portion, lets say:

a foo
another bar

you break the html nesting structure:

 <p> a fo<span>o </p>
<p> anoth</span>er bar </p>

This is impossible to achieve with only one tag.

Christoph
  • 50,121
  • 21
  • 99
  • 128
1

You're going to need to iterate through each character in the selected text, grouping the characters by the DOM node in which they reside. After you've created the groups, you'll want to wrap each group within the <span> tags.

You could do this by looking at the anchorNode and focusNode properties of the selection object, as well as testing other plausable nodes (ie. all children of the common parent/ancestor of the anchor and focus nodes) with the containsNode() method.

JasonWyatt
  • 5,275
  • 1
  • 31
  • 39
1

Using this excellent treeWalker implementation, here is a jsFiddle. Please let me know if this works for you. Side note, use rangy it is awesome.

EDIT: Nope, wait, fixed.

Community
  • 1
  • 1
Asad Saeeduddin
  • 46,193
  • 6
  • 90
  • 139
  • its good!!but not works very good if you select "er" in "another bar" – Martin Oct 11 '12 at 21:17
  • What problems are you having? Note: this was made only with firefox in mind, I don't know how well it will work in other browsers. – Asad Saeeduddin Oct 11 '12 at 21:23
  • Correct, i need to add a condition for single element. I'll modify and get back to you in a sec. – Asad Saeeduddin Oct 11 '12 at 21:24
  • 1
    if you modify it can you make for modify inner spans in the selection – Martin Oct 11 '12 at 21:31
  • case underscores and old selected text change attributes of element with the new sapan I'd appreciate it,thanks! – Martin Oct 11 '12 at 21:34
  • i'm trying, but i'll probably have to get back to you tomorrow because it is very late where i am. if you need an immediate solution, try one of the above or rangy. don't worry, i will give it a shot. – Asad Saeeduddin Oct 11 '12 at 21:50
  • dont worry :), i will see rangy – Martin Oct 11 '12 at 21:54
  • Well that is ultimately the best solution, but i just fixed the bug. I just saw your other requests. Perhaps open another question? I do not fully understand what you require there. – Asad Saeeduddin Oct 11 '12 at 21:56