String Utilities

function kebabToCamel(str = '', { separator = '_' } = {})

import { kebabToCamel } from '@semantic-ui/utils';

console.log(kebabToCamel('background-color')); // 'backgroundColor'
console.log(kebabToCamel('grid-2x2')); // 'grid_2x2'
console.log(kebabToCamel('heading-1')); // 'heading_1'
console.log(kebabToCamel('arrow-down-a-z')); // 'arrowDownAZ'

function camelToKebab(str = '', { lossless = false, separator = '_' } = {})

import { camelToKebab } from '@semantic-ui/utils';

console.log(camelToKebab('backgroundColor')); // 'background-color'
console.log(camelToKebab('grid_2x2')); // 'grid-2x2'
console.log(camelToKebab('heading_1')); // 'heading-1'
console.log(camelToKebab('arrowDownAZ')); // 'arrow-down-a-z'

// PascalCase is normalized by default
console.log(camelToKebab('FooBar')); // 'foo-bar'

// lossless preserves leading uppercase for exact round-trip
console.log(camelToKebab('FooBar', { lossless: true })); // '-foo-bar'

function capitalize(str = '')

import { capitalize } from '@semantic-ui/utils';

console.log(capitalize('hello')); // 'Hello'
console.log(capitalize('WORLD')); // 'WORLD'

function capitalizeWords(str = '')

import { capitalizeWords } from '@semantic-ui/utils';

console.log(capitalizeWords('hello world')); // 'Hello World'
console.log(capitalizeWords('THE QUICK BROWN FOX')); // 'The Quick Brown Fox'

function toTitleCase(str = '')

import { toTitleCase } from '@semantic-ui/utils';

console.log(toTitleCase('the quick brown fox')); // 'The Quick Brown Fox'
console.log(toTitleCase('a tale of two cities')); // 'A Tale of Two Cities'

import { toTitleCase } from '@semantic-ui/utils';

toTitleCase.config.stopWords.push('versus');
console.log(toTitleCase('cats versus dogs')); // 'Cats versus Dogs'

function joinWords(words, options = {})

import { joinWords } from '@semantic-ui/utils';

const fruits = ['apple', 'banana', 'cherry'];

console.log(joinWords(fruits));
// 'apple, banana, and cherry'

console.log(joinWords(fruits, { oxford: false }));
// 'apple, banana and cherry'

console.log(joinWords(fruits, { quotes: true }));
// '"apple", "banana", and "cherry"'

console.log(joinWords(fruits, { transform: word => word.toUpperCase() }));
// 'APPLE, BANANA, and CHERRY'

function getArticle(word, settings = {})

import { getArticle } from '@semantic-ui/utils';

console.log(getArticle('apple')); // 'an'
console.log(getArticle('banana')); // 'a'
console.log(getArticle('hour', { capitalize: true })); // 'An' (exceptions vocabulary)
console.log(getArticle('university')); // 'a' (sounds like "you")

import { getArticle } from '@semantic-ui/utils';

getArticle.config.exceptions.faq = 'an';
console.log(getArticle('FAQ', { includeWord: true })); // 'an FAQ'

function truncate(text, length, options = {})

import { truncate } from '@semantic-ui/utils';

// Basic usage
console.log(truncate('This is a long text that needs truncating', 20));
// 'This is a long text…'

// Disable word boundary
console.log(truncate('This is a long sentence', 15, { wordBoundary: false }));
// 'This is a very…'

// Custom suffix
console.log(truncate('This is a test', 10, { suffix: ' [more]' }));
// 'This [more]'

// Handles emojis correctly
console.log(truncate('Hello 👋 World 🌍', 10));
// 'Hello 👋…'

// Locale-aware segmentation
console.log(truncate('こんにちは世界です', 8, { locale: 'ja' }));
// 'こんにちは…'

function tokenize(str = '')

import { tokenize } from '@semantic-ui/utils';

console.log(tokenize("Hello World!")); // "hello-world"
console.log(tokenize("User's Name_123")); // "users-name-123"

function fill(template, values, { defaults, transform, missing, open = '{', close = '}' } = {})

import { fill, formatDate } from '@semantic-ui/utils';

console.log(fill('Name {chosenName} is already taken', { chosenName: 'jack' })); // 'Name jack is already taken'

// an unresolved key keeps its placeholder, so the typo shows itself
console.log(fill('Welcome back, {frist}', { first: 'jack' })); // 'Welcome back, {frist}'
console.log(fill('Welcome back, {first}', {}, { missing: 'friend' })); // 'Welcome back, friend'

// values first, defaults second
const copy = { appName: 'Semantic', plan: 'free' };
console.log(fill('{appName} on the {plan} plan', { plan: 'pro' }, { defaults: copy })); // 'Semantic on the pro plan'

// keys read the path grammar
console.log(fill('{user.name} signed in', { user: { name: 'jack' } })); // 'jack signed in'

// transform says how a value prints
console.log(fill('Renews {date}', { date: new Date('2026-01-02') })); // 'Renews {date}'
console.log(fill('Renews {date}', { date: new Date('2026-01-02') }, {
  transform: (value) => formatDate(value, 'LL'),
})); // 'Renews January 2, 2026'

// another placeholder grammar
console.log(fill('Hello ${name}', { name: 'jack' }, { open: '${', close: '}' })); // 'Hello jack'

function humanize(str = '', options = {})

import { humanize } from '@semantic-ui/utils';

// Basic usage
console.log(humanize('first_name')); // 'First name'
console.log(humanize('user-profile')); // 'User profile'
console.log(humanize('createdAt')); // 'Created at'

// Keeps acronyms whole, including plurals
console.log(humanize('getHTTPResponse')); // 'Get HTTP response'
console.log(humanize('getURLsFromPage')); // 'Get URLs from page'

// Drops a trailing id by default
console.log(humanize('user_id')); // 'User'
console.log(humanize('order_id', { dropId: false })); // 'Order ID'

// Built-in vocabulary rescues common lowercase acronyms
console.log(humanize('api_url')); // 'API URL'
console.log(humanize('avatar_url')); // 'Avatar URL'

// Title case for headers, respecting stop words
console.log(humanize('terms_of_service', { titleCase: true })); // 'Terms of Service'

// Sentence-case a shouting enum for a status label
console.log(humanize('IN_PROGRESS', { constantCase: true })); // 'In progress'

import { humanize } from '@semantic-ui/utils';

// set an app-wide vocabulary once
humanize.config.terms.sku = 'SKU';
humanize.config.terms.oauth = 'OAuth';

console.log(humanize('product_sku')); // 'Product SKU'
console.log(humanize('oauth_token')); // 'OAuth token'

// a per-call term layers over the global vocabulary
console.log(humanize('gpu_count', { terms: { gpu: 'GPU' } })); // 'GPU count'

function escapeHTML(string)

import { escapeHTML } from '@semantic-ui/utils';

const str = '<script>alert("XSS")</script>';
console.log(escapeHTML(str)); // "&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;"

console.log(escapeHTML(null)); // ''
console.log(escapeHTML(undefined)); // ''
console.log(escapeHTML('')); // ''

function unescapeHTML(string)

import { unescapeHTML } from '@semantic-ui/utils';

console.log(unescapeHTML('&lt;div&gt;Hello&lt;/div&gt;')); // '<div>Hello</div>'
console.log(unescapeHTML('rock &amp; roll')); // 'rock & roll'

function reverseString(str = '', options = {})

import { reverseString } from '@semantic-ui/utils';

// Basic usage
console.log(reverseString('hello')); // 'olleh'
console.log(reverseString('hello world')); // 'dlrow olleh'

// Handles emojis correctly
console.log(reverseString('Hello 👋')); // '👋 olleH'
console.log(reverseString('🎉🎊🎈')); // '🎈🎊🎉'

// Preserves complex grapheme clusters
console.log(reverseString('🇺🇸🇬🇧')); // '🇬🇧🇺🇸' (flag emojis)
console.log(reverseString('Hello 👋🏽')); // '👋🏽 olleH' (emoji with skin tone)

function editDistance(a, b, options = {})

import { editDistance } from '@semantic-ui/utils';

console.log(editDistance('kitten', 'sitting')); // 3
console.log(editDistance('Color', 'colour', { ignoreCase: true })); // 1

// the classic typo reads as one edit with swaps
console.log(editDistance('teh', 'the')); // 2
console.log(editDistance('teh', 'the', { swaps: true })); // 1

// cap the search for cheap candidate filtering
console.log(editDistance('banana', 'orange', { max: 2 })); // Infinity

// unicode-aware by default
console.log(editDistance('café', 'cafe\u0301')); // 0 (NFC-normalized)
console.log(editDistance('👍', '👎')); // 1 (code points, not surrogate halves)
console.log(editDistance('👩🏽‍🚀', '🧑🏻‍🚀', { grapheme: true })); // 1

function similarity(a, b, options = {})

import { similarity } from '@semantic-ui/utils';

console.log(similarity('kitten', 'sitting')); // 0.571…
console.log(similarity('hello', 'hello')); // 1
console.log(similarity('abc', 'xyz')); // 0

console.log(similarity('JavaScript', 'javascript', { ignoreCase: true })); // 1
console.log(similarity('recieve', 'receive', { swaps: true })); // 0.857…

// early-exit floor for fuzzy filtering
console.log(similarity('kitten', 'sitting', { min: 0.9 })); // 0

function suggest(word, candidates, options = {})

import { suggest } from '@semantic-ui/utils';

console.log(suggest('stirng', ['string', 'number', 'boolean'])); // 'string'
console.log(suggest('xyz', ['string', 'number'])); // null

// a config's options or a registry's keys are already a vocabulary
console.log(suggest('colr', { color: '#f00', size: 'large' })); // 'color'

// case and swap typos resolve to the canonical spelling
console.log(suggest('FORCE', ['force', 'quiet'])); // 'force'
console.log(suggest('sroted', ['sorted', 'sordid'])); // 'sorted'

// count offers choices, best-first
console.log(suggest('stirng', ['strong', 'string'], { count: 3 })); // ['string', 'strong']

// the caller owns the sentence
const match = suggest('paddign', ['padding', 'margin']);
const hint = match ? `, did you mean '${match}'?` : '';