Sree Sree - 6 months ago 34
Javascript Question

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

Answer

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