Add character count support for countType: "characters" using Intl.Segmenter

Author: colinrotherham

packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs

@@ -5,7 +5,7 @@ import {
   configOverride
 } from '../../common/configuration.mjs'
 import { formatErrorMessage } from '../../common/index.mjs'
-import { ConfigError, ElementError } from '../../errors/index.mjs'
+import { ConfigError, ElementError, SupportError } from '../../errors/index.mjs'
 import { I18n } from '../../i18n.mjs'
 
 /**
@@ -28,6 +28,11 @@ export class CharacterCount extends ConfigurableComponent {
   /** @private */
   count = 0
 
+  /**
+   * @type {Intl.Segmenter | null}
+   */
+  segmenter = null
+
   /** @private */
   $visibleCountMessage
 
@@ -126,6 +131,21 @@ export class CharacterCount extends ConfigurableComponent {
       locale: closestAttributeValue(this.$root, 'lang')
     })
 
+    if (this.config.countType === 'characters') {
+      if (!('Segmenter' in Intl)) {
+        throw new SupportError(
+          formatErrorMessage(
+            CharacterCount,
+            'Support for "Intl.Segmenter" required'
+          )
+        )
+      }
+
+      this.segmenter = new Intl.Segmenter(this.i18n.locale, {
+        granularity: 'grapheme'
+      })
+    }
+
     // Determine the limit attribute (characters or words)
     this.maxLength = this.config.maxlength ?? Infinity
 
@@ -360,8 +380,18 @@ export class CharacterCount extends ConfigurableComponent {
   updateCount() {
     const text = this.$textarea.value
 
+    // Count grapheme clusters (user-perceived characters)
+    if (this.config.countType === 'characters') {
+      this.count = this.segmenter
+        ? Array.from(this.segmenter.segment(text)).length
+        : 0
+
+      return
+    }
+
+    // Count consecutive non-whitespace results
     if (this.config.countType === 'words') {
-      const tokens = text.match(/\S+/g) ?? [] // Matches consecutive non-whitespace chars
+      const tokens = text.match(/\S+/g) ?? []
       this.count = tokens.length
       return
     }
@@ -515,8 +545,8 @@ export class CharacterCount extends ConfigurableComponent {
  * @property {number} [threshold=0] - The percentage value of the limit at
  *   which point the count message is displayed. If this attribute is set, the
  *   count message will be hidden by default.
- * @property {'length' | 'words'} [countType] - The count type (`"length"` or
- *   `"words"`) used to count the text.
+ * @property {'characters' | 'length' | 'words'} [countType] - The count type
+ *   (`"characters"`, `"length"` or `"words"`) used to count the text.
  * @property {CharacterCountTranslations} [i18n=CharacterCount.defaults.i18n] - Character count translations
  */
 

packages/govuk-frontend/src/govuk/components/character-count/character-count.yaml

@@ -234,6 +234,15 @@ examples:
       label:
         text: Enter a job description
 
+  - name: with count type 'characters'
+    options:
+      id: with-count-type-characters
+      name: example
+      countType: characters
+      maxlength: 200
+      label:
+        text: Enter a job description
+
   - name: with count type 'words'
     options:
       id: with-count-type-words