Dig Deeper
Regex
Regex
let string = '👨👨👧👧💜🤧🤒🏥😀';
let string2 = 'The quick brown fox jumps over the lazy dog. It barked.';
const splitWithRegEx = (s) => s.match(/.{0,5}/gu)[0];
console.log(splitWithRegEx(string)); // will be "👨👨👧" - incorrect
console.log(splitWithIterator(string2)); // will be "The q"
This solution:
- Uses the String.match() method with a supplied RegEx
- The RegEx supplied matches any character
., between 0 and 5 times {0, 5}. The u flag enables Unicode support.
- This matches characters by code points as well.
- Then it returns the first match as the output string.
This approach will not yield the correct result when applied to characters that are made of multiple
graphere clusters and are meant to represent a single visual unit, such as some emoji.
Iterators
Iterators
let string = '👨👨👧👧💜🤧🤒🏥😀';
let string2 = 'The quick brown fox jumps over the lazy dog. It barked.';
const splitWithIterator = (s) => [...s].slice(0, 5).join('');
console.log(splitWithIterator(string)); // will be "👨👨👧" - incorrect
console.log(splitWithIterator(string2)); // will be "The q"
This solution:
- Uses spread syntax to unpack the string into an array of its characters.
- internaly, the spread operator works with iterators to separate the string by its code points.
- Then it separates the first 5 characters (code points).
- Finally, it joins them back into a string.
This approach will not yield the correct result when applied to characters that are made of multiple
graphere clusters and are meant to represent a single visual unit, such as some emoji.
Intl.Segmenter
Intl.Segmenter
let string = '👨👨👧👧💜🤧🤒🏥😀';
const splitWithSegmenter = (s) =>
Array.from(new Intl.Segmenter().segment(String(s)), (x) => x.segment)
.slice(0, 5)
.join('');
console.log(splitWithSegmenter(string)); // will be "👨👨👧👧💜🤧🤒🏥" - correct, yay!
This solution:
- Uses the Intl.Segmenter object to split the string by graphemes and form an array from the result.
- Then it separates the first 5 graphemes.
- Finally, it joins them back into a string.
At the time of writing (February 2024) this method is not fully supported by the stable release of the Mozilla Firefox browser.
However, support for the Intl.Segmenter object is being worked on in the Nightly release of the browser.
Source: Exercism javascript/micro-blog