The specific text inside the contenteditable div is in bold

Question

I have this in my contenteditable div. Whenever I type #something, then enter a space, I would like to immediately highlight this word in this div.

eg.

This is my message. # lol. I would like to boldly highlight the hashtag.

Below is the code

<div id="message" name="message" contenteditable="true"></div> $('#message').keyup(function(e){ var len = $(this).val().length; if ($(this).val().substring(length - 1, 1) == '#') { } //detect space if(e.keyCode == 32){ } }); 

I am using jquery. How can I do it?

Answer 1

Using contenteditable = "true" can be tricky, but this is a possible solution:

Text is bold when preceded by a word #

• Example: hello #world , this is #sample

HTML:

 <div id="divEditable" contenteditable="true"></div> 

JavaScript: jsbin.com/zisote

We're going to split the code, but it's actually wrapped in IIFE

 /*** Cached private variables ***/ var _break = /<br\s?\/?>$/g, _rxword = /(#[\w]+)$/gm, _rxboldDown = /<\/b>$/gm, _rxboldUp = /<\/b>(?!<br\s?\/?>)([\w]+)(?:<br\s?\/?>)?$/, _rxline = /(<br\s?\/?>)+(?!<b>)(<\/b>$)+/g; 

 /*** Handles the event when a key is pressed ***/ $(document).on("keydown.editable", '.divEditable', function (e) { //fixes firefox NodeContent which ends with <br> var html = this.innerHTML.replace(_break, ""), key = (e.which || e.keyCode), dom = $(this); //space key was pressed if (key == 32 || key == 13) { //finds the # followed by a word if (_rxword.test(dom.text())) dom.data("_newText", html.replace(_rxword, "<b>$1</b>&nbsp;")); //finds the end of bold text if (_rxboldDown.test(html)) dom.data("_newText", html + "&nbsp;"); } //prevents the bold NodeContent to be cached dom.attr("contenteditable", false).attr("contenteditable", true); }); 

 /*** Handles the event when the key is released ***/ $(document).on("keyup.editable", '.divEditable', function (e) { var dom = $(this), newText = dom.data("_newText"), innerHtml = this.innerHTML, html; //resets the NodeContent if (!dom.text().length || innerHtml == '<br>') { dom.empty(); return false; } //fixes firefox issue when text must follow with bold if (!newText && _rxboldUp.test(innerHtml)) newText = innerHtml.replace(_rxboldUp, "$1</b>"); //fixes firefox issue when space key is rendered as <br> if (!newText && _rxline.test(innerHtml)) html = innerHtml; else if (newText && _rxline.test(newText)) html = newText; if (html) newText = html.replace(_rxline, "$2$1"); if (newText && newText.length) { dom.html(newText).removeData("_newText"); placeCaretAtEnd(this); } }); 

 /*** Sets the caret position at end of NodeContent ***/ function placeCaretAtEnd (dom) { var range, sel; dom.focus(); if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") { range = document.createRange(); range.selectNodeContents(dom); range.collapse(false); sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (typeof document.body.createTextRange != "undefined") { //this handles the text selection in IE range = document.body.createTextRange(); range.moveToElementText(dom); range.collapse(false); range.select(); } } 

Here you can play with live code: jsbin.com/zisote

Answer 2

Here is an example. Editable div is not a good idea. Try to change it. Maybe a text box is better ...

http://jsfiddle.net/blackjim/h9dck/5/

 function makeBold(match, p1, p2, p3, offset, string) { return p1+'<b>' + p2 + '</b>'+p3; }; $('#message').keyup(function (e) { var $this = $(this); //detect space if (e.keyCode == 32) { var innerHtml = $this.html(); innerHtml = innerHtml.replace(/(.*[\s|($nbsp;)])(#\w+)(.*)/g, makeBold); if(innerHtml !== $this.html()){ $this.html(innerHtml) .focus(); } } });