- Ext JS 3.0 Cookbook
- Jorge Ramon
- 470字
- 2021-04-01 13:43:45
Manipulating strings à la Ext JS
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.
How to do it...
You can manipulate strings as shown in the following steps:
- 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';
- 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)
.
- CorelDRAW服裝設計實用教程(第四版)
- Apache Roller 4.0 – Beginner's Guide
- CAD/CAM軟件應用技術
- Photoshop CS6實戰基礎培訓教程(全視頻微課版)
- Photoshop+CorelDRAW平面設計實例教程(第4版)
- OpenCart 1.4 Template Design Cookbook
- PostgreSQL 9.0 High Performance
- 新編中文版3ds Max 2016入門與提高
- Premiere Pro短視頻剪輯零基礎一本通
- 中文版Photoshop CS6完全自學手冊(超值版)
- Unreal Development Kit Beginner's Guide
- 3ds Max 印象 影視粒子特效全解析
- Flash ActionScript 3.0互動設計項目教程
- Adobe創意大學Premiere Pro CS5 影視剪輯師標準實訓教材
- Altium Designer18電路板設計入門與提高實戰