Trim &nbsp values in javascript

PSR picture PSR · May 23, 2016 · Viewed 11.7k times · Source

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

Answer

T.J. Crowder picture T.J. Crowder · May 23, 2016

&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.