1

If have this code here:

$(function() {
   $("#a").keyup(function(e) {
      var updatedText = this.value.replace(
      /(^|[^>])(hello)($|[^<])/gi, "$1<b>$2</b>$3");
      if (updatedText != this.value)
         this.value = updatedText;
   });
});

It functions as to take the last word typed that matches the RegExp (in this case the word hello) and adds <b> tags around it. This works great in a Textarea (demo here: http://jsbin.com/ibecel/2/edit But I cannot seem to modify it to work in a contenteditable div. How would I need to modify it to work in a contenteditable div? I tried changing the value object to innerHTML and innerText but to no avail. It always looses focus after the word is typed, or doesn't exit the new things made. PLEASE HELP

comu
  • 921
  • 1
  • 11
  • 29
  • Is the idea for the `` tags to actually display as text that the user can see, or to cause "hello" to become bold? If you want to see the actual string "" you should use "<b>". Also, definitely use `innerHTML` rather than `value`. – nnnnnn Oct 26 '11 at 00:28

1 Answers1

0

I made this modified version: http://jsbin.com/amazaq/2/edit - innerHTML is all you need.

However you are in trouble with the cursor position. That is a harder problem - have a look at Set cursor position on contentEditable <div>

Community
  • 1
  • 1
Gavin Brock
  • 5,027
  • 1
  • 30
  • 33