javascriptjquerytrimkendo-editor

Trim &nbsp values in javascript


I am trying to trim the text which I get from kendo editor like this.

var html = "  T  "; // This sample text I get from Kendo editor
            console.log("Actual :" + html + ":");
            var text = "";
            try {
                // html decode
                var editorData = $('<div/>').html(html).text();
                text = editorData.trim();                    
                console.log("After trim :" + text + ":");
            }
            catch (e) {
                console.log("exception");
                text = html;
            }

This code is in seperate js file ( generated from typescript). When the page loads the trimming is not working. But when I run the same code in developer tools console window its working. Why it is not working?

Adding typescript code

 const html: string = $(selector).data("kendoEditor").value();
        console.log("Actual :" + html + ":");
        let text: string = "";
        try {
            // html decode
            var editorData = $('<div/>').html(html).text();
            text = editorData.trim();
            console.log("After trim :" + text + ":");
        }
        catch (e) {
            console.log("exception");
            text = html;
        }

Solution

  • &nbsp; becomes a non-break-space character, \u00a0. JavaScript's String#trim is supposed to remove those, but historically browser implementations have been a bit buggy in that regard. I thought those issues had been resolved in modern ones, but...

    If you're running into browsers that don't implement it correctly, you can work around that with a regular expression:

    text = editorData.replace(/(?:^[\s\u00a0]+)|(?:[\s\u00a0]+$)/g, '');
    

    That says to replace all whitespace or non-break-space chars at the beginning and end with nothing.

    But having seen your comment:

    When I run this piece of code separately, it is working fine for me. But in application its failing.

    ...that may not be it.

    Alternately, you could remove the &nbsp; markup before converting to text:

    html = html.replace(/(?:^(?:&nbsp;)+)|(?:(?:&nbsp;)+$)/g, '');
    var editorData = $('<div/>').html(html).text();
    text = editorData.trim();    
    

    That removes any &nbsp;s at the beginning or end prior to converting the markup to text.