String Functions and Methods

Slide navigation: Forward with space bar, →, or PgDn. Backwards with ← or PgUp.

Code Points and “Char Codes”

Reminder: Code point = Unicode character U+0000...U+10FFFF

Static String.fromCodePoint:

let str = String.fromCodePoint(0x48, 0x69, 0x20, 0x1F310, 0x21) // 'Hi 🌐!'

“char code” = value of UTF-16 encoding.
Code points > U+FFFF use two “char codes”:
- U+1F310 “Globe with meridians” 🌐 has “char codes” U+D83C and U+DF10
```
str = String.fromCharCode(0x48, 0x69, 0x20, 0xD83C, 0xDF10, 0x21)
```
Method str.codePointAt(i) method yields code point starting at UTF-16 offset i
- str.codePointAt(3) is 127760 or 0x1F310
- str.codePointAt(4) is a “high surrogate” value between 0xDC00 and 0xDFFF
Easier to work with array of code points [...str] // [ 'H', 'i', ' ', '🌐' ]
str.charAt(i)/s[i] yields a string of length 1 whose character has char code str.charCodeAt(i).
- Caution: That string is not a valid UTF-16 string for code points > U+FFFF.

Substrings

substring(fromInclusive, toExclusive)
slice is like substring, but allows negative index values:
```
'Hello'.slice(-3, -1) // 'll'
```
indexOf(str), lastIndexOf(str) yield index of first, last substring, or -1 if not found.
startsWith(str), endsWith(str), includes(str) yield Boolean result.
trim, trimStart, trimEnd yield substring obtained by dropping leading and/or traling white space (Unicode space/line/paragraph separators).
str.split(separator) yields an array of substrings around the separator.
- ```
'Mary had a little lamb'.split(' ') → ['Mary', 'had', 'a', 'little', 'lamb']
```
- You can supply a limit:
```
'Mary had a little lamb'.split(' ', 4) → ['Mary', 'had', 'a', 'little']
```
- The separator can be a regular expression.
- Caution: An empty separator '' splits into UTF-16 code units. Use [...str] instead.

Other String Methods

str.padStart(len), str.padEnd(len) yields a string with space characters added to start/end whose length is ≥ len
str.repeat(n) yields the string n times.
str.concat(x, y, ...) yields str followed by the string conversions of all arguments.
str.toUpperCase(), str.toLowerCase() yields the string converted to uppercase/lowercase
str.replace(original, replacement) replaces the first occurrence.
- 'moon'.replace('o', 'astod') → 'mastodon'
- Beware of $ in the replacement string—see below.
See the regular expressions section for match, matchAll, search, additional versions of replace
See the Internationalization lesson for toLocaleUpperCase, toLocaleLowerCase, localeCompare, normalize

Global functions encodeURI, encodeURIComponent, decodeURI, decodeURIComponent

encodeURI('http://hello 🌐.com') → 'http://hello%20%F0%9F%8C%90.com'

Regular Expressions

Constructing Regular Expressions

Regular expression denotes a set of strings:
[0-9]+ Sequence of digits (at least one)

[1-9]|1[0-2] 1 ... 9 or 10, 11, 12

".*" Quoted string

https?://[a-zA-Z]+\.com Dot com site
Regex literal /[0-9]+/
- Must escape regex metacharacters [ ^ $ . | ? * + ( ) as well as \ and, in literals, /
```
/https?:\/\/[a-zA-Z]+\.com/
```
Regex from string: RegExp('https?:\\/\\/[a-zA-Z]+\\.com')
- Or new RegExp(...)

Flags

Example: i makes match case-insensitive.
```
/[a-z]+\.com/i
```

Can set in constructor:

const regex = RegExp(/[a-z]+\.com/, 'i')

Supported flags:

`i`	`ignoreCase`	Ignore case
`g`	`global`	Find all matches
`m`	`multiline`	`^`, `$` match start, end of line
`s`	`dotAll`	`.` matches newline
`u`	`unicode`	Match Unicode characters, not code units
`y`	`sticky`	Match must start at `regex.lastIndex`

Regex object has read-only properties source, flags, ignoreCase, global, ...

regex.source → '[a-z]+\\.com'
regex.flags → 'i'
regex.ignoreCase → true

Regex Methods

regex.test(str) is true if str contains a match::
```
/[0-9]+/.test('agent 007') → true
```
- Use start/end anchors to match the entire string.
```
/^[0-9]+$/.test('agent 007') → false
```

regex.exec(str) yields array with information about the match:

/[0-9]+/.exec('agent 007') → ['007', index: 6, input: 'agent 007']

Visit multiple matches with g (global) flag:

let digits = /[0-9]+/g
digits.exec('555-1212') // Matches 555, sets digits.lastIndex to 3
digits.exec('555-1212') // Matches 1212, sets digits.lastIndex to 8
digits.exec('555-1212') // Returns null, sets digits.lastIndex to 0

Sticky flag: Match must start at lastIndex

digits = /[0-9]+/y
digits.lastIndex = 3
digits.exec('555-1212') → null
digits.lastIndex = 5
digits.exec('555-1212') → ['212', index: 5, ...]

Groups

Use groups to match subexpressions.
Example: Use (...) to group hours, minutes, am/pm:
```
let time = /([1-9]|1[0-2]):([0-5][0-9])([ap]m)/
```

Group matches are included in exec result as [1], [2], ...

time.exec('12:15pm') → ['12:15pm', '12', '15', 'pm', index: 0, ...]

Named groups:

time = /(?<hours>[0-9]|1[0-2]):(?<minutes>[0-5][0-9])([ap]m)/
time.exec('12:15pm')
  → ['12:15pm', '12', '15', 'pm', groups: { hours: '12', minutes: '15' }, ...]

Non-capturing group:
```
(?:http|ftp)://(.*)
```

Match previous group:

/(['"]).*\1/ matches 'Fred' or "Fred" but not "Fred'
/(?<quote>['"]).*\k<quote>/

String Methods with Regular Expressions

str.match(regex) returns the match data:

'555-1212'.match(/[0-9]+/) → ['555',index: 0, ...]

With global flag, get an array of all matches:

'555-1212'.match(/[0-9]+/g) → [ '555', '1212' ]

Stage 3 str.matchAll(regex) returns a lazy iterable of the match data.
- Useful for global patterns with groups.
str.search(regex) returns the index of the first match or -1.
str.replace(regex, replacementString) replaces the first (or, with g flag, every) match:
```
'555-1212'.replace(/[0-9]/g, '#') → '###-####'
```

More About Regex Replace

Special symbols in replacement string:
$`, $' the portion before or after the matched string

$& matched string

$n the n^th group

$$ dollar sign
```
'hello'.replace(/[aeiou]/g, '$&$&$&') → 'heeellooo'
```

Replacement function:

'Harry Smith'.replace(/([A-Z])[a-z]+ ([A-Z][a-z]+)/,
   (match, first, last)  => `${last}, ${first}.`) → 'Smith, H.'

Replacement function arguments:

match
group matches (if any)
offset
entire string

Regular Expressions and Unicode

By default, regular expressions work with UTF-16 code units.
Example: . matches a code unit, not a Unicode character:
```
/Hello .$/.test('Hello 🌐') → false
```
Use u flag whenever the regex or matched string can have characters > U+FFFF:
```
/Hello .$/u.test('Hello 🌐') → true
```
Use \u{...} to embed Unicode code points into pattern:
```
/Hello \u{1F310}/u
```
\p{...} matches Unicode binary property:
```
'Hello 世界'.match(/\p{L}+/gu) → ['Hello', '世界']
```
L, Lu, Ll Letters, upper/lowercase letters

N Numbers

S Symbols

P Punctuation

Arbitrary Unicode property:

'Hello 世界'.match(/\p{Script=Han}+/gu) → ['世界']

\P{...} is complement of \p{...}

Exotic Features

Normally, + and * repetitions are greedy:

'"Hi" and "Bye"'.match(/".*"/g) → ['"Hi" and "Bye"']

Reluctant match:

'"Hi" and "Bye"'.match(/".*?"/g) → ['"Hi"', '"Bye"']

Lookahead—match, but don't include the regex inside (?= )
```
'7:32am'.match(/[0-9]+(?=[ap]m)/g) → ['32']
```

Lookbehind with ?<=:

'7:32am'.match(/(?<=:)[0-9]+/g) → ['32']

Inverses ?!, ?<!

'7:32am'.match(/(?<!:)[0-9]+/g) → ['7', '2']

Some people, when confronted with a problem, think "I know, I'll use regular expressions." Now they have two problems.—Jamie Zawinski

`[0-9]+`	Sequence of digits (at least one)
`[1-9]\|1[0-2]`	1 ... 9 or 10, 11, 12
`".*"`	Quoted string
`https?://[a-zA-Z]+\.com`	Dot com site

$`, `$'`	the portion before or after the matched string
`$&`	matched string
`$n`	the `n`^th group
`$$`	dollar sign

`L`, `Lu`, `Ll`	Letters, upper/lowercase letters
`N`	Numbers
`S`	Symbols
`P`	Punctuation