String Functions and Methods

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 nth 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

End of Lesson 6