REGEX - Highlight a portion of more than 19 characters

Question

Hi,

I have the text inside the div[contenteditable="true"] , and I have to highlight the part ( span.tooLong ) that exceeds the 19-digit limit. Content in a div can have HTML tags or entities, and should be ignored when counting to 19.

Twitter has a similar way to tweet too long:

<strong> Examples:

• This is text ⇨ This is text
• This is just too long text ⇨ This is just too lo<span class="tooLong">ng text</span>
• This <b>text</b> has been <i>formatted</i> with HTML ⇨ This <b>text</b> has been <span class="tooLong"><i>formatted</i> with HTML</span>

How can I implement this in JavaScript?

(I want to use regular expressions as much as possible)

Answer 1

Alright ... here is some code that I think will work for you or at least start.

Basically, for regular expression you need to find all over 19 characters:

 var extra = content.match(/.{19}(.*)/)[1]; 

So, I put together a sample document on how you can use this.

Take a look at DEMO .

Here is the Javascript that I use (I use jQuery for locators here, but it can be easily changed to use direct Javascript ... I just prefer jQuery for such things) ...

 $(document).ready(function() { $('#myDiv').keyup(function() { var content = $('#myDiv').html(); var extra = content.match(/.{19}(.*)/)[1]; $('#extra').html(extra); var newContent = content.replace(extra, "<span class='highlight'>" + extra + "</span>"); $('#sample').html(newContent); }); }); 

Basically, I have three DIV settings. One for you to enter your text. One to show which characters exceed the 19-digit limit. And one to show how you can highlight extra characters.

My html tags are not checked in my code example, since there are too many of them to process them ... but should give you an excellent starting point as to how this might work.

NOTE : you can view the full code that I wrote using this link: http://jsbin.com/OnAxULu/1/edit

Answer 2

Here is the answer that uses my Rangy library. It uses the Class Applier and TextRange modules to apply styling on character ranges within editable content while preserving the selection. It also uses a custom debounce interval to prevent sluggishness in editor performance. In addition, it should work on old IE.

Demo: http://jsfiddle.net/timdown/G4jn7/2/

Code example:

 var characterLimit = 40; var debounceInterval = 200; function highlightExcessCharacters() { // Bookmark selection so we can restore it later var sel = rangy.getSelection(); var savedSel = sel.saveCharacterRanges(editor); // Remove previous highlight var range = rangy.createRange(); range.selectNodeContents(editor); classApplier.undoToRange(range); // Store the total number of characters var editorCharCount = range.text().length; // Create a range selecting the excess characters range.selectCharacters(editor, characterLimit, editorCharCount); // Highlight the excess classApplier.applyToRange(range); // Restore the selection sel.restoreCharacterRanges(editor, savedSel); } var handleEditorChangeEvent = (function() { var timer; function debouncer() { if (timer) { timer = null; } highlightExcessCharacters(); } return function() { if (timer) { window.clearTimeout(timer); } timer = window.setTimeout(debouncer, debounceInterval); }; })(); function listen(target, eventName, listener) { if (target.addEventListener) { target.addEventListener(eventName, listener, false); } else if (target.attachEvent) { target.attachEvent("on" + eventName, listener); } } rangy.init(); var editor = document.getElementById("editor"); var classApplier = rangy.createClassApplier("overrun"); // Set up debounced event handlers var editEvents = ["input", "keydown", "keypress", "keyup", "cut", "copy", "paste"]; for (var i = 0, eventName; eventName = editEvents[i++]; ) { listen(editor, eventName, handleEditorChangeEvent); }