ExtReact Docs Help

Introduction

The documentation for the ExtReact product diverges somewhat from the documentation of other Sencha products. The sections below describe documentation for all products except where indicated as unique to ExtReact.

Terms, Icons, and Labels

Many classes have shortcut names used when creating (instantiating) a class with a configuration object. The shortcut name is referred to as an alias (or xtype if the class extends Ext.Component). The alias/xtype is listed next to the class name of applicable classes for quick reference.

ExtReact component classes list the configurable name prominently at the top of the API class doc followed by the fully-qualified class name.

Access Levels

Framework classes or their members may be specified as private or protected. Else, the class / member is public. Public, protected, and private are access descriptors used to convey how and when the class or class member should be used.

Member Types

Member Syntax

Below is an example class member that we can disect to show the syntax of a class member (the lookupComponent method as viewed from the Ext.button.Button class in this case).

lookupComponent ( item ) : Ext.Component
protected

Called when a raw config object is added to this container either during initialization of the items config, or when new items are added), or {@link #insert inserted.

This method converts the passed object into an instanced child component.

This may be overridden in subclasses when special processing needs to be applied to child creation.

Parameters

item :  Object

The config object being added.

Returns
Ext.Component

The component to be added.

Let's look at each part of the member row:

Member Flags

The API documentation uses a number of flags to further commnicate the class member's function and intent. The label may be represented by a text label, an abbreviation, or an icon.

Class Icons

- Indicates a framework class

- A singleton framework class. *See the singleton flag for more information

- A component-type framework class (any class within the Ext JS framework that extends Ext.Component)

- Indicates that the class, member, or guide is new in the currently viewed version

Member Icons

- Indicates a class member of type config

Or in the case of an ExtReact component class this indicates a member of type prop

- Indicates a class member of type property

- Indicates a class member of type method

- Indicates a class member of type event

- Indicates a class member of type theme variable

- Indicates a class member of type theme mixin

- Indicates that the class, member, or guide is new in the currently viewed version

Class Member Quick-Nav Menu

Just below the class name on an API doc page is a row of buttons corresponding to the types of members owned by the current class. Each button shows a count of members by type (this count is updated as filters are applied). Clicking the button will navigate you to that member section. Hovering over the member-type button will reveal a popup menu of all members of that type for quick navigation.

Getter and Setter Methods

Getting and setter methods that correlate to a class config option will show up in the methods section as well as in the configs section of both the API doc and the member-type menus just beneath the config they work with. The getter and setter method documentation will be found in the config row for easy reference.

ExtReact component classes do not hoist the getter / setter methods into the prop. All methods will be described in the Methods section

History Bar

Your page history is kept in localstorage and displayed (using the available real estate) just below the top title bar. By default, the only search results shown are the pages matching the product / version you're currently viewing. You can expand what is displayed by clicking on the button on the right-hand side of the history bar and choosing the "All" radio option. This will show all recent pages in the history bar for all products / versions.

Within the history config menu you will also see a listing of your recent page visits. The results are filtered by the "Current Product / Version" and "All" radio options. Clicking on the button will clear the history bar as well as the history kept in local storage.

If "All" is selected in the history config menu the checkbox option for "Show product details in the history bar" will be enabled. When checked, the product/version for each historic page will show alongside the page name in the history bar. Hovering the cursor over the page names in the history bar will also show the product/version as a tooltip.

Search and Filters

Both API docs and guides can be searched for using the search field at the top of the page.

On API doc pages there is also a filter input field that filters the member rows using the filter string. In addition to filtering by string you can filter the class members by access level, inheritance, and read only. This is done using the checkboxes at the top of the page.

The checkbox at the bottom of the API class navigation tree filters the class list to include or exclude private classes.

Clicking on an empty search field will show your last 10 searches for quick navigation.

API Doc Class Metadata

Each API doc page (with the exception of Javascript primitives pages) has a menu view of metadata relating to that class. This metadata view will have one or more of the following:

Expanding and Collapsing Examples and Class Members

Runnable examples (Fiddles) are expanded on a page by default. You can collapse and expand example code blocks individually using the arrow on the top-left of the code block. You can also toggle the collapse state of all examples using the toggle button on the top-right of the page. The toggle-all state will be remembered between page loads.

Class members are collapsed on a page by default. You can expand and collapse members using the arrow icon on the left of the member row or globally using the expand / collapse all toggle button top-right.

Desktop -vs- Mobile View

Viewing the docs on narrower screens or browsers will result in a view optimized for a smaller form factor. The primary differences between the desktop and "mobile" view are:

Viewing the Class Source

The class source can be viewed by clicking on the class name at the top of an API doc page. The source for class members can be viewed by clicking on the "view source" link on the right-hand side of the member row.

ExtReact 6.7.0


top

Hierarchy

String

Summary

String is a global object that may be used to construct String instances.

String objects may be created by calling the constructor new String(). The String object wraps JavaScript's string primitive data type with the methods described below. The global function String() can also be called without new in front to create a primitive string. String literals in JavaScript are primitive strings.

Because JavaScript automatically converts between string primitives and String objects, you can call any of the methods of the String object on a string primitive. JavaScript automatically converts the string primitive to a temporary String object, calls the method, then discards the temporary String object. For example, you can use the String.length property on a string primitive created from a string literal:

s_obj = new String(s_prim = s_also_prim = "foo");

s_obj.length;       // 3
s_prim.length;      // 3
s_also_prim.length; // 3
'foo'.length;       // 3
"foo".length;       // 3

(A string literal is denoted with single or double quotation marks.)

String objects can be converted to primitive strings with the valueOf method.

String primitives and String objects give different results when evaluated as JavaScript. Primitives are treated as source code; String objects are treated as a character sequence object. For example:

s1 = "2 + 2";               // creates a string primitive
s2 = new String("2 + 2");   // creates a String object
eval(s1);                   // returns the number 4
eval(s2);                   // returns the string "2 + 2"
eval(s2.valueOf());         // returns the number 4

Character access

There are two ways to access an individual character in a string. The first is the charAt method:

return 'cat'.charAt(1); // returns "a"

The other way is to treat the string as an array, where each index corresponds to an individual character:

return 'cat'[1]; // returns "a"

The second way (treating the string as an array) is not part of ECMAScript 3. It is a JavaScript and ECMAScript 5 feature.

In both cases, attempting to set an individual character won't work. Trying to set a character through charAt results in an error, while trying to set a character via indexing does not throw an error, but the string itself is unchanged.

Comparing strings

C developers have the strcmp() function for comparing strings. In JavaScript, you just use the less- than and greater-than operators:

var a = "a";
var b = "b";
if (a < b) // true
    print(a + " is less than " + b);
else if (a > b)
    print(a + " is greater than " + b);
else
    print(a + " and " + b + " are equal.");

A similar result can be achieved using the localeCompare method inherited by String instances.

Documentation for this class comes from [MDN](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String) and is available under [Creative Commons: Attribution-Sharealike license](http://creativecommons.org/licenses/by-sa/2.0/).
No members found using the current filters

properties

Instance Properties

length : Number

Reflects the length of the string.

This property returns the number of code units in the string. UTF-16, the string format used by JavaScript, uses a single 16-bit code unit to represent the most common characters, but needs to use two code units for less commonly-used characters, so it's possible for the value returned by length to not match the actual number of characters in the string.

For an empty string, length is 0.

var x = "Netscape";
var empty = "";

console.log("Netspace is " + x.length + " code units long");
console.log("The empty string is has a length of " + empty.length); // should be 0

methods

Instance Methods

charAt ( index ) : String

Returns the character at the specified index.

Characters in a string are indexed from left to right. The index of the first character is 0, and the index of the last character in a string called stringName is stringName.length - 1. If the index you supply is out of range, JavaScript returns an empty string.

The following example displays characters at different locations in the string "Brave new world":

var anyString="Brave new world";

document.writeln("The character at index 0 is '" + anyString.charAt(0) + "'");
document.writeln("The character at index 1 is '" + anyString.charAt(1) + "'");
document.writeln("The character at index 2 is '" + anyString.charAt(2) + "'");
document.writeln("The character at index 3 is '" + anyString.charAt(3) + "'");
document.writeln("The character at index 4 is '" + anyString.charAt(4) + "'");
document.writeln("The character at index 999 is '" + anyString.charAt(999) + "'");

These lines display the following:

The character at index 0 is 'B'
The character at index 1 is 'r'
The character at index 2 is 'a'
The character at index 3 is 'v'
The character at index 4 is 'e'
The character at index 999 is ''

The following provides a means of ensuring that going through a string loop always provides a whole character, even if the string contains characters that are not in the Basic Multi-lingual Plane.

var str = 'A\uD87E\uDC04Z'; // We could also use a non-BMP character directly
for (var i=0, chr; i < str.length; i++) {
    if ((chr = getWholeChar(str, i)) === false) {continue;} // Adapt this line at the top of

each loop, passing in the whole string and the current iteration and returning a variable to represent the individual character alert(chr); }

function getWholeChar (str, i) {
    var code = str.charCodeAt(i);

    if (isNaN(code)) {
    return ''; // Position not found
    }
    if (code < 0xD800 || code > 0xDFFF) {
        return str.charAt(i);
    }
    if (0xD800 <= code && code <= 0xDBFF) { // High surrogate (could change last hex to 0xDB7F

to treat high private surrogates as single characters) if (str.length <= (i+1)) { throw 'High surrogate without following low surrogate'; } var next = str.charCodeAt(i+1); if (0xDC00 > next || next > 0xDFFF) { throw 'High surrogate without following low surrogate'; } return str.charAt(i)+str.charAt(i+1); } // Low surrogate (0xDC00 <= code && code <= 0xDFFF) if (i === 0) { throw 'Low surrogate without preceding high surrogate'; } var prev = str.charCodeAt(i-1); if (0xD800 > prev || prev > 0xDBFF) { // (could change last hex to 0xDB7F to treat high private surrogates as single characters) throw 'Low surrogate without preceding high surrogate'; } return false; // We can pass over low surrogates now as the second component in a pair which we have already processed }

While the second example may be more frequently useful for those wishing to support non-BMP characters (since the above does not require the caller to know where any non-BMP character might appear), in the event that one does wish, in choosing a character by index, to treat the surrogate pairs within a string as the single characters they represent, one can use the following:

function fixedCharAt (str, idx) {
    var ret = '';
    str += '';
    var end = str.length;

    var surrogatePairs = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
    while ((surrogatePairs.exec(str)) != null) {
        var li = surrogatePairs.lastIndex;
        if (li - 2 < idx) {
            idx++;
        }
        else {
        break;
    }
}

if (idx >= end || idx < 0) {
    return '';
}

ret += str.charAt(idx);

if (/[\uD800-\uDBFF]/.test(ret) && /[\uDC00-\uDFFF]/.test(str.charAt(idx+1))) {
    ret += str.charAt(idx+1); // Go one further, since one of the "characters" is part of a

surrogate pair } return ret; }

Parameters

index :  Number

An integer between 0 and 1 less than the length of the string.

Returns

:String

Individual character from string.

charCodeAt ( index ) : Number

Returns a number indicating the Unicode value of the character at the given index.

Unicode code points range from 0 to 1,114,111. The first 128 Unicode code points are a direct match of the ASCII character encoding.

Note that charCodeAt will always return a value that is less than 65,536. This is because the higher code points are represented by a pair of (lower valued) "surrogate" pseudo-characters which are used to comprise the real character. Because of this, in order to examine or reproduce the full character for individual characters of value 65,536 and above, for such characters, it is necessary to retrieve not only charCodeAt(i), but also charCodeAt(i+1) (as if examining/reproducing a string with two letters). See example 2 and 3 below.

charCodeAt returns NaN if the given index is not greater than 0 or is greater than the length of the string.

Backward Compatibility with JavaScript 1.2

The charCodeAt method returns a number indicating the ISO-Latin-1 codeset value of the character at the given index. The ISO-Latin-1 codeset ranges from 0 to 255. The first 0 to 127 are a direct match of the ASCII character set.

Example 1: Using charCodeAt

The following example returns 65, the Unicode value for A.

"ABC".charCodeAt(0) // returns 65

Example 2: Fixing charCodeAt to handle non-Basic-Multilingual-Plane characters if their presence earlier in the string is unknown

This version might be used in for loops and the like when it is unknown whether non-BMP characters exist before the specified index position.

function fixedCharCodeAt (str, idx) {
    // ex. fixedCharCodeAt ('\uD800\uDC00', 0); // 65536
    // ex. fixedCharCodeAt ('\uD800\uDC00', 1); // 65536
    idx = idx || 0;
    var code = str.charCodeAt(idx);
    var hi, low;
    if (0xD800 <= code && code <= 0xDBFF) { // High surrogate (could change last hex to 0xDB7F to treat high private surrogates as single characters)
        hi = code;
        low = str.charCodeAt(idx+1);
        if (isNaN(low)) {
            throw 'High surrogate not followed by low surrogate in fixedCharCodeAt()';
        }
        return ((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000;
    }
    if (0xDC00 <= code && code <= 0xDFFF) { // Low surrogate
    // We return false to allow loops to skip this iteration since should have already handled

high surrogate above in the previous iteration return false; } return code; }

Example 3: Fixing charCodeAt to handle non-Basic-Multilingual-Plane characters if their presence earlier in the string is known

function knownCharCodeAt (str, idx) {
    str += '';
    var code,
    end = str.length;

    var surrogatePairs = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
    while ((surrogatePairs.exec(str)) != null) {
        var li = surrogatePairs.lastIndex;
        if (li - 2 < idx) {
            idx++;
        }
        else {
            break;
        }
    }

    if (idx >= end || idx < 0) {
        return NaN;
    }

    code = str.charCodeAt(idx);

    var hi, low;
    if (0xD800 <= code && code <= 0xDBFF) {
        hi = code;
        low = str.charCodeAt(idx+1); // Go one further, since one of the "characters" is part of

a surrogate pair return ((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000; } return code; }

Parameters

index :  Number

An integer greater than 0 and less than the length of the string; if it is not a number, it defaults to 0.

Returns

:Number

Value between 0 and 65535.

concat ( strings ) : String

Combines combines the text from one or more strings and returns a new string. Changes to the text in one string do not affect the other string.

The following example combines strings into a new string.

var hello = "Hello, ";
console.log(hello.concat("Kevin", " have a nice day.")); // Hello, Kevin have a nice day.

Parameters

strings :  String...

The strings to concatenate.

Returns

:String

Result of both strings.

constructor ( value )

Creates new String object.

Parameters

value :  Object

The value to wrap into String object.

fromCharCode ( numbers ) : String

Returns a string created by using the specified sequence of Unicode values.

This method returns a string and not a String object.

Because fromCharCode is a static method of String, you always use it as String.fromCharCode(), rather than as a method of a String object you created.

Although most common Unicode values can be represented in a fixed width system/with one number (as expected early on during JavaScript standardization) and fromCharCode() can be used to return a single character for the most common values (i.e., UCS-2 values which are the subset of UTF-16 with the most common characters), in order to deal with ALL legal Unicode values, fromCharCode() alone is inadequate. Since the higher code point characters use two (lower value) "surrogate" numbers to form a single character, fromCharCode() can be used to return such a pair and thus adequately represent these higher valued characters.

Be aware, therefore, that the following utility function to grab the accurate character even for higher value code points, may be returning a value which is rendered as a single character, but which has a string count of two (though usually the count will be one).

// String.fromCharCode() alone cannot get the character at such a high code point
// The following, on the other hand, can return a 4-byte character as well as the
//   usual 2-byte ones (i.e., it can return a single character which actually has
//   a string length of 2 instead of 1!)
alert(fixedFromCharCode(0x2F804)); // or 194564 in decimal

function fixedFromCharCode (codePt) {
    if (codePt > 0xFFFF) {
        codePt -= 0x10000;
        return String.fromCharCode(0xD800 + (codePt >> 10), 0xDC00 +
        (codePt & 0x3FF));
    }
    else {
        return String.fromCharCode(codePt);
    }
}

The following example returns the string "ABC".

String.fromCharCode(65,66,67)

Parameters

numbers :  Number...

A sequence of numbers that are Unicode values.

Returns

:String

String containing characters from encoding.

indexOf ( searchValue, fromIndex ) : Number

Returns the index within the calling String object of the first occurrence of the specified value, or -1 if not found.

Characters in a string are indexed from left to right. The index of the first character is 0, and the index of the last character of a string called stringName is stringName.length - 1.

"Blue Whale".indexOf("Blue")    // returns 0
"Blue Whale".indexOf("Blute")   // returns -1
"Blue Whale".indexOf("Whale",0) // returns 5
"Blue Whale".indexOf("Whale",5) // returns 5
"Blue Whale".indexOf("",9)      // returns 9
"Blue Whale".indexOf("",10)     // returns 10
"Blue Whale".indexOf("",11)     // returns 10

The indexOf method is case sensitive. For example, the following expression returns -1:

"Blue Whale".indexOf("blue")

Note that '0' doesn't evaluate to true and '-1' doesn't evaluate to false. Therefore, when checking if a specific string exists within another string the correct way to check would be:

"Blue Whale".indexOf("Blue") != -1 // true
"Blue Whale".indexOf("Bloe") != -1 // false

The following example uses indexOf and lastIndexOf to locate values in the string "Brave new world".

var anyString="Brave new world"

document.write("<P>The index of the first w from the beginning is " + anyString.indexOf("w"))          // Displays 8
document.write("<P>The index of the first w from the end is " + anyString.lastIndexOf("w"))      // Displays 10
document.write("<P>The index of 'new' from the beginning is " + anyString.indexOf("new"))        // Displays 6
document.write("<P>The index of 'new' from the end is " + anyString.lastIndexOf("new"))    // Displays 6

The following example defines two string variables. The variables contain the same string except that the second string contains uppercase letters. The first writeln method displays 19. But because the indexOf method is case sensitive, the string "cheddar" is not found in myCapString, so the second writeln method displays -1.

myString="brie, pepper jack, cheddar"
myCapString="Brie, Pepper Jack, Cheddar"
document.writeln('myString.indexOf("cheddar") is ' + myString.indexOf("cheddar"))
document.writeln('<P>myCapString.indexOf("cheddar") is ' + myCapString.indexOf("cheddar"))

The following example sets count to the number of occurrences of the letter x in the string str:

count = 0;
pos = str.indexOf("x");
while ( pos != -1 ) {
    count++;
    pos = str.indexOf("x",pos+1);
}

Parameters

searchValue :  String

A string representing the value to search for.

fromIndex :  Number

The location within the calling string to start the search from. It can be any integer between 0 and the length of the string. The default value is 0.

Returns

:Number

Position of specified value or -1 if not found.

lastIndexOf ( searchValue, fromIndex ) : Number

Returns the index within the calling String object of the last occurrence of the specified value, or -1 if not found. The calling string is searched backward, starting at fromIndex.

Characters in a string are indexed from left to right. The index of the first character is 0, and the index of the last character is stringName.length - 1.

"canal".lastIndexOf("a")   // returns 3
"canal".lastIndexOf("a",2) // returns 1
"canal".lastIndexOf("a",0) // returns -1
"canal".lastIndexOf("x")   // returns -1

The lastIndexOf method is case sensitive. For example, the following expression returns -1:

"Blue Whale, Killer Whale".lastIndexOf("blue")

The following example uses indexOf and lastIndexOf to locate values in the string "Brave new world".

var anyString="Brave new world"

// Displays 8
document.write("<P>The index of the first w from the beginning is " +
anyString.indexOf("w"))
// Displays 10
document.write("<P>The index of the first w from the end is " +
anyString.lastIndexOf("w"))
// Displays 6
document.write("<P>The index of 'new' from the beginning is " +
anyString.indexOf("new"))
// Displays 6
document.write("<P>The index of 'new' from the end is " +
anyString.lastIndexOf("new"))

Parameters

searchValue :  String

A string representing the value to search for.

fromIndex :  Number

The location within the calling string to start the search from, indexed from left to right. It can be any integer between 0 and the length of the string. The default value is the length of the string.

Returns

:Number

localeCompare ( compareString ) : Number

Returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order.

Returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order. Returns -1 if the string occurs earlier in a sort than compareString, returns 1 if the string occurs afterwards in such a sort, and returns 0 if they occur at the same level.

The following example demonstrates the different potential results for a string occurring before, after, or at the same level as another:

alert('a'.localeCompare('b')); // -1
alert('b'.localeCompare('a')); // 1
alert('b'.localeCompare('b')); // 0

Parameters

compareString :  String

The string against which the referring string is comparing.

Returns

:Number

Returns -1 if the string occurs earlier in a sort than compareString, returns 1 if the string occurs afterwards in such a sort, and returns 0 if they occur at the same level.

match ( regexp ) : Array

Used to match a regular expression against a string.

If the regular expression does not include the g flag, returns the same result as regexp.exec(string).

If the regular expression includes the g flag, the method returns an Array containing all matches. If there were no matches, the method returns null.

The returned Array has an extra input property, which contains the regexp that generated it as a result. In addition, it has an index property, which represents the zero-based index of the match in the string.

In the following example, match is used to find "Chapter" followed by 1 or more numeric characters followed by a decimal point and numeric character 0 or more times. The regular expression includes the i flag so that case will be ignored.

str = "For more information, see Chapter 3.4.5.1";
re = /(chapter \d+(\.\d)*)/i;
found = str.match(re);
document.write(found);

This returns the array containing Chapter 3.4.5.1,Chapter 3.4.5.1,.1

"Chapter 3.4.5.1" is the first match and the first value remembered from (Chapter \d+(\.\d)*).

".1" is the second value remembered from (\.\d).

The following example demonstrates the use of the global and ignore case flags with match. All letters A through E and a through e are returned, each its own element in the array

var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var regexp = /[A-E]/gi;
var matches_array = str.match(regexp);
document.write(matches_array);

matches_array now equals ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e'].

Parameters

regexp :  RegExp

A RegExp object. If a non-RegExp object obj is passed, it is implicitly converted to a RegExp by using new RegExp(obj).

Returns

:Array

Contains results of the match (if any).

replace ( pattern, replacement ) : String

Used to find a match between a regular expression and a string, and to replace the matched substring with a new substring.

This method does not change the String object it is called on. It simply returns a new string.

To perform a global search and replace, either include the g flag in the regular expression or if the first parameter is a string, include g in the flags parameter.

The replacement string can include the following special replacement patterns:

Pattern Inserts
$$ Inserts a $.
$& Inserts the matched substring.
`$`` Inserts the portion of the string that precedes the matched substring.
$' Inserts the portion of the string that follows the matched substring.
$n or $nn Where n or nn are decimal digits, inserts the _n_th parenthesized submatch string, provided the first
argument was a RegExp object.

You can specify a function as the second parameter. In this case, the function will be invoked after the match has been performed. The function's result (return value) will be used as the replacement string. (Note: the above-mentioned special replacement patterns do not apply in this case.) Note that the function will be invoked multiple times for each full match to be replaced if the regular expression in the first parameter is global.

The arguments to the function are as follows:

Possible Name Supplied Value
str The matched substring. (Corresponds to $& above.)
p1, p2, ... The _n_th parenthesized submatch string, provided the first argument to replace was a RegExp object.
(Correspond to $1, $2, etc. above.)
offset The offset of the matched substring within the total string being examined. (For example, if the total string
was "abcd", and the matched substring was "bc", then this argument will be 1.)
s The total string being examined.

(The exact number of arguments will depend on whether the first argument was a RegExp object and, if so, how many parenthesized submatches it specifies.)

The following example will set newString to "XXzzzz - XX , zzzz":

function replacer(str, p1, p2, offset, s)
{
    return str + " - " + p1 + " , " + p2;
}
var newString = "XXzzzz".replace(/(X*)(z*)/, replacer);

In the following example, the regular expression includes the global and ignore case flags which permits replace to replace each occurrence of 'apples' in the string with 'oranges'.

var re = /apples/gi;
var str = "Apples are round, and apples are juicy.";
var newstr = str.replace(re, "oranges");
print(newstr);

In this version, a string is used as the first parameter and the global and ignore case flags are specified in the flags parameter.

var str = "Apples are round, and apples are juicy.";
var newstr = str.replace("apples", "oranges", "gi");
print(newstr);

Both of these examples print "oranges are round, and oranges are juicy."

In the following example, the regular expression is defined in replace and includes the ignore case flag.

var str = "Twas the night before Xmas...";
var newstr = str.replace(/xmas/i, "Christmas");
print(newstr);

This prints "Twas the night before Christmas..."

The following script switches the words in the string. For the replacement text, the script uses the $1 and $2 replacement patterns.

var re = /(\w+)\s(\w+)/;
var str = "John Smith";
var newstr = str.replace(re, "$2, $1");
print(newstr);

This prints "Smith, John".

In this example, all occurrences of capital letters in the string are converted to lower case, and a hyphen is inserted just before the match location. The important thing here is that additional operations are needed on the matched item before it is given back as a replacement.

The replacement function accepts the matched snippet as its parameter, and uses it to transform the case and concatenate the hyphen before returning.

function styleHyphenFormat(propertyName)
{
    function upperToHyphenLower(match)
    {
        return '-' + match.toLowerCase();
    }
    return propertyName.replace(/[A-Z]/, upperToHyphenLower);
}

Given styleHyphenFormat('borderTop'), this returns 'border-top'.

Because we want to further transform the result of the match before the final substitution is made, we must use a function. This forces the evaluation of the match prior to the toLowerCase() method. If we had tried to do this using the match without a function, the toLowerCase() would have no effect.

var newString = propertyName.replace(/[A-Z]/, '-' + '$&'.toLowerCase());  // won't work

This is because '$&'.toLowerCase() would be evaluated first as a string literal (resulting in the same '$&') before using the characters as a pattern.

The following example replaces a Fahrenheit degree with its equivalent Celsius degree. The Fahrenheit degree should be a number ending with F. The function returns the Celsius number ending with C. For example, if the input number is 212F, the function returns 100C. If the number is 0F, the function returns -17.77777777777778C.

The regular expression test checks for any number that ends with F. The number of Fahrenheit degree is accessible to the function through its second parameter, p1. The function sets the Celsius number based on the Fahrenheit degree passed in a string to the f2c function. f2c then returns the Celsius number. This function approximates Perl's s///e flag.

function f2c(x)
{
    function convert(str, p1, offset, s)
    {
        return ((p1-32) * 5/9) + "C";
    }
    var s = String(x);
    var test = /(\d+(?:\.\d*)?)F\b/g;
    return s.replace(test, convert);
}

Parameters

pattern :  String/RegExp

Either a string or regular expression pattern to search for.

replacement :  String/Function

Either string or function:

  • The String to replace the pattern with. Number of special replacement patterns are supported; see the "Specifying a string as a parameter" section above.
  • A function to be invoked to create the replacement. The arguments supplied to this function are described in the "Specifying a function as a parameter" section above.

Returns

:String

String of matched replaced items.

slice ( beginSlice, endSlice ) : String

Extracts a section of a string and returns a new string.

slice extracts the text from one string and returns a new string. Changes to the text in one string do not affect the other string.

slice extracts up to but not including endSlice. string.slice(1,4) extracts the second character through the fourth character (characters indexed 1, 2, and 3).

As a negative index, endSlice indicates an offset from the end of the string. string.slice(2,-1) extracts the third character through the second to last character in the string.

The following example uses slice to create a new string.

// assumes a print function is defined
var str1 = "The morning is upon us.";
var str2 = str1.slice(4, -2);
print(str2);

This writes:

morning is upon u

Parameters

beginSlice :  Number

The zero-based index at which to begin extraction.

endSlice :  Number

The zero-based index at which to end extraction. If omitted, slice extracts to the end of the string.

Returns

:String

All characters from specified start up to (but excluding) end.

split ( seperator, limit ) : Array

Splits a String object into an array of strings by separating the string into substrings.

The split method returns the new array.

When found, separator is removed from the string and the substrings are returned in an array. If separator is omitted, the array contains one element consisting of the entire string.

If separator is a regular expression that contains capturing parentheses, then each time separator is matched the results (including any undefined results) of the capturing parentheses are spliced into the output array. However, not all browsers support this capability.

Note: When the string is empty, split returns an array containing one empty string, rather than an empty array.

The following example defines a function that splits a string into an array of strings using the specified separator. After splitting the string, the function displays messages indicating the original string (before the split), the separator used, the number of elements in the array, and the individual array elements.

function splitString(stringToSplit,separator)
{
    var arrayOfStrings = stringToSplit.split(separator);
    print('The original string is: "' + stringToSplit + '"');
    print('The separator is: "' + separator + '"');
    print("The array has " + arrayOfStrings.length + " elements: ");

    for (var i=0; i < arrayOfStrings.length; i++)
        print(arrayOfStrings[i] + " / ");
}

var tempestString = "Oh brave new world that has such people in it.";
var monthString = "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec";

var space = " ";
var comma = ",";

splitString(tempestString, space);
splitString(tempestString);
splitString(monthString, comma);

This example produces the following output:

The original string is: "Oh brave new world that has such people in it."
The separator is: " "
The array has 10 elements: Oh / brave / new / world / that / has / such / people / in / it. /

The original string is: "Oh brave new world that has such people in it."
The separator is: "undefined"
The array has 1 elements: Oh brave new world that has such people in it. /

The original string is: "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec" The separator is: "," The array has 12 elements: Jan / Feb / Mar / Apr / May / Jun / Jul / Aug / Sep / Oct / Nov / Dec /

In the following example, split looks for 0 or more spaces followed by a semicolon followed by 0 or more spaces and, when found, removes the spaces from the string. nameList is the array returned as a result of split.

var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand ";
print(names);
var re = /\s*;\s*\/;
var nameList = names.split(re);
print(nameList);

This prints two lines; the first line prints the original string, and the second line prints the resulting array.

Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand
Harry Trump,Fred Barney,Helen Rigby,Bill Abel,Chris Hand

In the following example, split looks for 0 or more spaces in a string and returns the first 3 splits that it finds.

var myString = "Hello World. How are you doing?";
var splits = myString.split(" ", 3);
print(splits);

This script displays the following:

Hello,World.,How

If separator contains capturing parentheses, matched results are returned in the array.

var myString = "Hello 1 word. Sentence number 2.";
var splits = myString.split(/(\d)/);
print(splits);

This script displays the following:

Hello ,1, word. Sentence number ,2, .

Parameters

seperator :  String

Specifies the character to use for separating the string. The separator is treated as a string or a regular expression. If separator is omitted, the array returned contains one element consisting of the entire string.

limit :  Number

Integer specifying a limit on the number of splits to be found. The split method still splits on every match of separator, but it truncates the returned array to at most limit elements.

Returns

:Array

Substrings are returned in an array.

substr ( start, length ) : String

Returns the characters in a string beginning at the specified location through the specified number of characters.

start is a character index. The index of the first character is 0, and the index of the last character is 1 less than the length of the string. substr begins extracting characters at start and collects length characters (unless it reaches the end of the string first, in which case it will return fewer).

If start is positive and is greater than or equal to the length of the string, substr returns an empty string.

If start is negative, substr uses it as a character index from the end of the string. If start is negative and abs(start) is larger than the length of the string, substr uses 0 as the start index. Note: the described handling of negative values of the start argument is not supported by Microsoft JScript.

If length is 0 or negative, substr returns an empty string. If length is omitted, substr extracts characters to the end of the string.

Consider the following script:

// assumes a print function is defined
var str = "abcdefghij";
print("(1,2): "    + str.substr(1,2));
print("(-3,2): "   + str.substr(-3,2));
print("(-3): "     + str.substr(-3));
print("(1): "      + str.substr(1));
print("(-20, 2): " + str.substr(-20,2));
print("(20, 2): "  + str.substr(20,2));

This script displays:

(1,2): bc
(-3,2): hi
(-3): hij
(1): bcdefghij
(-20, 2): ab
(20, 2):

Parameters

start :  Number

Location at which to begin extracting characters.

length :  Number

The number of characters to extract.

Returns

:String

Modified string.

substring ( indexA, [indexB] ) : String

Returns the characters in a string between two indexes into the string.

substring extracts characters from indexA up to but not including indexB. In particular:

  • If indexA equals indexB, substring returns an empty string.
  • If indexB is omitted, substring extracts characters to the end of the string.
  • If either argument is less than 0 or is NaN, it is treated as if it were 0.
  • If either argument is greater than stringName.length, it is treated as if it were stringName.length.

If indexA is larger than indexB, then the effect of substring is as if the two arguments were swapped; for example, str.substring(1, 0) == str.substring(0, 1).

The following example uses substring to display characters from the string "Sencha":

// assumes a print function is defined
var anyString = "Sencha";

// Displays "Sen"
print(anyString.substring(0,3));
print(anyString.substring(3,0));

// Displays "cha"
print(anyString.substring(3,6));
print(anyString.substring(6,3));

// Displays "Sencha"
print(anyString.substring(0,6));
print(anyString.substring(0,10));

The following example replaces a substring within a string. It will replace both individual characters and substrings. The function call at the end of the example changes the string "Brave New World" into "Brave New Web".

function replaceString(oldS, newS, fullS) {
    // Replaces oldS with newS in the string fullS
    for (var i = 0; i < fullS.length; i++) {
        if (fullS.substring(i, i + oldS.length) == oldS) {
            fullS = fullS.substring(0, i) + newS + fullS.substring(i + oldS.length,

fullS.length); } } return fullS; }

replaceString("World", "Web", "Brave New World");

Parameters

indexA :  Number

An integer between 0 and one less than the length of the string.

indexB :  Number (optional)

An integer between 0 and the length of the string.

Returns

:String

Returns the characters in a string between two indexes into the string.

toLocaleLowerCase String

The characters within a string are converted to lower case while respecting the current locale. For most languages, this will return the same as toLowerCase.

The toLocaleLowerCase method returns the value of the string converted to lower case according to any locale-specific case mappings. toLocaleLowerCase does not affect the value of the string itself. In most cases, this will produce the same result as toLowerCase(), but for some locales, such as Turkish, whose case mappings do not follow the default case mappings in Unicode, there may be a different result.

The following example displays the string "sencha":

var upperText="SENCHA";
document.write(upperText.toLocaleLowerCase());

Returns

:String

Returns value of the string in lowercase.

toLocaleUpperCase String

The characters within a string are converted to upper case while respecting the current locale. For most languages, this will return the same as toUpperCase.

The toLocaleUpperCase method returns the value of the string converted to upper case according to any locale-specific case mappings. toLocaleUpperCase does not affect the value of the string itself. In most cases, this will produce the same result as toUpperCase(), but for some locales, such as Turkish, whose case mappings do not follow the default case mappings in Unicode, there may be a different result.

The following example displays the string "SENCHA":

var lowerText="sencha";
document.write(lowerText.toLocaleUpperCase());

Returns

:String

Returns value of the string in uppercase.

toLowerCase String

Returns the calling string value converted to lower case.

The toLowerCase method returns the value of the string converted to lowercase. toLowerCase does not affect the value of the string itself.

The following example displays the lowercase string "sencha":

var upperText="SENCHA";
document.write(upperText.toLowerCase());

Returns

:String

Returns value of the string in lowercase.

toString String

Returns a string representing the specified object. Overrides the Object.toString method.

The String object overrides the toString method of the Object object; it does not inherit Object.toString. For String objects, the toString method returns a string representation of the object.

The following example displays the string value of a String object:

x = new String("Hello world");
alert(x.toString())      // Displays "Hello world"

Returns

:String

A string representation of the object.

toUpperCase String

Returns the calling string value converted to uppercase.

The toUpperCase method returns the value of the string converted to uppercase. toUpperCase does not affect the value of the string itself.

The following example displays the string "SENCHA": var lowerText="sencha"; document.write(lowerText.toUpperCase());

Returns

:String

Returns value of the string in uppercase.

trim String

Removes whitespace from both ends of the string.

Does not affect the value of the string itself.

The following example displays the lowercase string "foo":

var orig = "   foo  ";
alert(orig.trim());

NOTE: This method is part of the ECMAScript 5 standard.

Returns

:String

A string stripped of whitespace on both ends.

valueOf String

Returns the primitive value of the specified object. Overrides the Object.valueOf method.

The valueOf method of String returns the primitive value of a String object as a string data type. This value is equivalent to String.toString.

This method is usually called internally by JavaScript and not explicitly in code.

x = new String("Hello world");
alert(x.valueOf())          // Displays "Hello world"

Returns

:String

Returns value of string.

ExtReact 6.7.0