REGEX - Highlight part over 19 chars

Question

Hi,

I have some text inside div[contenteditable=\"true\"] and I should highlight (span.tooLong) part which goes over the 1

Answer 1

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

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

Sample code:

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);
}

Answer 2

Okay... here's some code that I think will work for you, or at least get your started.

Basically, the regex you need to find everything over 19 characters is this:

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

So, I put together a sample document of how you might use this.

Take a look at the DEMO.

Here's the Javascript I'm using (I'm using jQuery for the locators here, but this can easily be modified to use straight Javascript... I just prefer jQuery for stuff like this)...

$(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 DIVs setup. One for you to enter your text. One to show what characters are over the 19 character limit. And one to show how you might highlight the extra characters.

My code sample does not check for html tags, as there are too many to try and handle... but should give you a great starting point as to how this might work.

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