String manipulation has always been a challenging area in JavaScript. Here, you will learn how to escape special characters, trim, pad, format, truncate, and change the case of your strings with the help of the utilities of Ext JS.
You can manipulate strings as shown in the following steps:
1. Create your sample values as shown here:
var needsEscape = "ExtJS's String Class will escape this"; var needsTrimming = " Needs trimming "; var cls = 'color-class' var color = 'Blue'; var sort = 'ASC'; var sample = "some text"; var longText = "This text should be truncated, it's really long."; var withScript = 'Some text<script type="text/javascript">var color = "Blue";<\/script>'; var longText = "Only a part of this text is needed."; var multiLineText = "One line\nAnother line\nYet another line"; var money = 29.99; var sample1 = '22'; var sample2 = '550'; var sample3 = '1500';
2. Now, let's use the string manipulation functions:
var escaped = String.escape(needsEscape); document.write(escaped + '<br/>'); // The escaped string is "ExtJS\'s String Class will escape this". var trimmed = needsTrimming.trim(); document.write(trimmed + '<br/>'); // the trimmed string is "Needs trimming" var formatted = String.format('<span class="{0}">{1}</span>', cls, color); document.write(formatted + '<br/>'); // formatted is '<div class="color-class">Color</div>' sort = sort.toggle('ASC', 'DESC'); document.write(sort + '<br/>'); // instead of conditional logic: //sort = (sort == 'ASC' ? 'DESC' : 'ASC'); var converted = Ext.util.Format.uppercase(sample); document.write(converted + '<br/>'); // converted is now "SOME TEXT". sample = "SOME TEXT"; converted = Ext.util.Format.lowercase(sample); // converted is now "some text". document.write(converted + '<br/>'); sample = "some text"; converted = Ext.util.Format.capitalize(sample); document.write(converted + '<br/>'); // converted is now "Some text". var truncated = Ext.util.Format.ellipsis(longText, 20); document.write(truncated + '<br/>'); // truncated is "This text should ...". // Removing script tags var noScript = Ext.util.Format.stripScripts(withScript); document.write(noScript + '<br/>'); // noScript is "Some text". // Returning a portion of a string var subString = Ext.util.Format.substr(longText, 0, 11); document.write(subString + '<br/>'); // subString is "Only a part". // Converting newline characters to the html tag <br/> var html = Ext.util.Format.nl2br(multiLineText); document.write(html + '<br/>'); // html is // One line // Another line // Yet another line var usCurrency = Ext.util.Format.usMoney(money); document.write(usCurrency + '<br/>'); // usCurrency is $29.99 // Normalizing strings var normalized1 = String.leftPad(sample1, 4, '0'); // normalized1 is '0022' var normalized2 = String.leftPad(sample2, 4, '0'); // normalized3 is '0550'; var normalized3 = String.leftPad(sample3, 4, '0'); // normalized2 is '1500' document.write(normalized1 + '<br/>'); document.write(normalized2 + '<br/>'); document.write(normalized3 + '<br/>');
The useful functions escape(string), trim(), format(value, start, length), toggle(value1, value2)
, and leftPad(string, size, [char])
all belong to the Ext.String
class, which is an extension of the JavaScript String
object.
The rest of the functions mentioned in this recipe belong to the Ext.util.Format
class. Format
is a singleton class that contains reusable formatting functions. Other useful functions in Format
are htmlEncode(string)
and htmlDecode(string)
.