jQuery selecting and replacing text in a div

Question

So, im writing a very very basic text editor that is going to allow a user to do certain things such as change the colour of the text, make it bold or apply a header styling.

The first problem I have ran into is that selecting a word in text and applying bold to it will make it apply to the first instance of that word in the string when i do a replace, i need to be able to replace the actual item selected, by index, rather than a straight word replace.

Secondly is it possible for me to set tags within the div for the user to type within (click BOLD button and the user will type in and its set too bold etc, standard wysiwyg behaviour?)

My fiddle is here : http://jsfiddle.net/d7uvvywu/12/

I apologise, I am a beginner with jQuery.

My replace method for the text.

var span = '<'+htmlCon+'>' + highlight + '<'+htmlCon+'>';
var text = $('#textRegions_1__Text1').html();
$('#textRegions_1__Text1').html(text.replace(highlight, span));

If you're already using jQuery, take a look at https://github.com/timdown/rangy/wiki/Class-Applier-Module — haim770, Aug 12 '14 at 10:29
Possible duplicate of http://stackoverflow.com/questions/3964710/replacing-selected-text-in-the-textarea — IT goldman, Aug 12 '14 at 10:30
Rangy plugin doesn't solve the second part of my issue though, essentially id just like to know if its possible. — GrahamHull, Aug 12 '14 at 10:40

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

2

What you need to accomplish is not get the selected text, but rather get the selected index start and selected index end.

Getting a selection from a textbox (text area) has already been well discussed here: How to get selected text from textbox control with javascript

edited May 23 '17 at 12:11

Community

1
1

answered Aug 12 '14 at 10:31

ro0ter

379
1
9

This example shows the mozilla version working with the getting start and end index, is that possible in IE too? Also does the javascript replace function have an overload for using index position instead? – GrahamHull Aug 12 '14 at 10:45
2

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Alex Netkachov Aug 12 '14 at 10:53
@AlexAtNet the link is referring to a valid SO (_same site_) post. so it is ok. because in future, if the author edited the post, the post here becomes invalid. so, having only a link is fine. – Mr_Green Aug 12 '14 at 11:04

score 0 · Accepted Answer · answered Aug 14 '14 at 09:31

So, as this was an editable div, the other answers in this thread didnt work for me, I ended up getting the index's of the selected text this way:

  var textComponent = document.getElementById('editer1');
  var selectedText;
  var range = window.getSelection().getRangeAt(0);
  var beforeSelectedRange = range.cloneRange();
  beforeSelectedRange.selectNodeContents(textComponent);
  beforeSelectedRange.setEnd(range.startContainer,range.startOffset);
  var startIndex = range.startContainer;
  var start = beforeSelectedRange.toString().length;
  var end = start + range.toString().length;

jQuery selecting and replacing text in a div

2 Answers2