Insert text after specific character?

Question

Is it possible to insert a div after a certain amount of characters in a paragraph of text?

If I have a div full of text, like so:

<div class="content">
Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.
</div>

And I want to insert a div after the 13th character:

Vivamus luctu<div>s urna sed urna ultricies ac tempor dui sagittis

Can I do this with jQuery/Javascript?

I am receiving the bounds for where I want to insert a div from getSelection().extentOffset which results in a number, say 13 which is where I want to insert the div.

I was able to get this to partially work, like so:

$("div").on("mouseup", function () {
    var start = window.getSelection().anchorOffset;
    var end = window.getSelection().extentOffset;
    console.log(start + ", " + end);
    console.log($(".content").text().substring(start, end));
    $('.output').html($('.content').html().substring(0, start) + '<span class="highlight">' + $('.content').html().substring(start, end) + "</span>" + $('.content').html().substring(end));
});

But that replaces the entire text when the bounds change, meaning that there can't be more than one section wrapped in a div.

`"Vivamus luctu
s urna sed urna ultricies ac tempor dui sagittis" isn't valid.` : a div must be closed. — Denys Séguret, Feb 28 '13 at 21:22
Obviously. What I would do is use the same method and put a closing `div` at the end bound. — Charlie, Feb 28 '13 at 21:23

score 1 · Answer 1 · edited May 23 '17 at 11:49

1

This is quite a complex problem specially if you trying to achieve cross browser functionality. I recommend using this library Rangy Also check out this question for an example usage

edited May 23 '17 at 11:49

Community

1
1

answered Feb 28 '13 at 22:13

Michal

13,439
3
35
33

Luckily, I don't need cross browser compatibility. Just Safari. – Charlie Feb 28 '13 at 23:10
And I'm looking at Rangy, but I need to be able to detect if the text that is being highlighted is already highlighted, and if it is, delete the current highlight, and add in a new one that combines both parts. Do you know if Rangy can do that? – Charlie Feb 28 '13 at 23:25
Have a look at this question http://stackoverflow.com/questions/8339857/how-to-know-if-selected-text-is-inside-a-specific-div – Michal Feb 28 '13 at 23:33
Thank you for the link. However, that only returns true if the entire selection is JUST the previous selection. I need to be able to detect if any part of the currently selected text includes a highlighted section. – Charlie Feb 28 '13 at 23:36
You can probably use https://code.google.com/p/rangy/wiki/RangyRange#getNodes%28%5BArray_nodeTypes%5B,_Function_filter%5D%5D%29 – Michal Feb 28 '13 at 23:40
If you have the time, could you provide an example? – Charlie Mar 01 '13 at 00:29

score 0 · Answer 2 · answered Feb 28 '13 at 22:38

0

You can use $(".content").contents() to get the text-DOM-Nodes and can replace them with that part you want, just look if the nodeType is what you want.

http://api.jquery.com/contents/

answered Feb 28 '13 at 22:38

FibreFoX

2,858
1
19
41

Can you provide an example? – Charlie Mar 01 '13 at 00:31
after reading twice, i think i misunderstood your question. What is the goal you want to reach? make some selected text being put into somewhere else or just having it wrapped in that div? maybe i can help you with it anyway ;) – FibreFoX Mar 01 '13 at 09:18

Insert text after specific character?

2 Answers2