New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Implementing custom Word Character counter


Implement custom Word / Character counter

The code below demonstrates how to implement a custom counter by using the **onkeydown
event of RadEditor, regular expressions as well as a standard HTML *SPAN *element, which will display the words and characters count.

<script type="text/javascript">
function OnClientLoad(editor)
    editor.attachEventHandler ("onkeydown", function (e)
        var content = editor.get_text(); //returns the editor's content as plain text
        var words = 0; 
        if (content) 
            var punctRegX = /[!\.?;,:&_\-\-\{\}\[\]\(\)~#'"]/g; 
            var contentcontent = content.replace(punctRegX, ""); 
            var trimRegX = /(^\s+)|(\s+$)/g; 
            contentcontent = content.replace(trimRegX, ""); 
            if (content) 
                splitRegX = /\s+/; 
                var array = content.split(splitRegX); 
                words = array.length; 
    var counter = $get("counter");    
    counter.innerHTML = "Words: " + words + " Characters: " + content.length; 

<span id="counter"></span>
<telerik:RadEditor id="RadEditor1" OnClientLoad="OnClientLoad" Runat="server"></telerik:RadEditor>
In this article