javascript 38 lines · 8 steps

Parsing full names into first and last

A name splitter that handles whitespace, suffixes, comma order, and multi-word surname particles.

Explained by highlit

Intermediate string-parsing regex edge-cases normalization

1function splitFullName(fullName) {
const cleaned = (fullName || '').trim().replace(/\s+/g, ' ');
3 
if (!cleaned) {
  return { firstName: '', lastName: '' };
}
7 
const suffixes = /^(jr|sr|ii|iii|iv|md|phd|esq)\.?$/i;
const parts = cleaned.split(' ');
10 
let suffix = '';
if (parts.length > 2 && suffixes.test(parts[parts.length - 1])) {
  suffix = parts.pop();
}
15 
if (parts.length === 1) {
  return { firstName: parts[0], lastName: '', suffix };
}
19 
if (cleaned.includes(',')) {
  const [last, rest] = cleaned.split(',', 2).map((s) => s.trim());
  return { firstName: rest, lastName: last, suffix };
}
24 
const particles = /^(van|von|de|del|della|di|da|la|le|st\.?|mac|mc|o')$/i;
let splitIndex = parts.length - 1;
while (splitIndex > 1 && particles.test(parts[splitIndex - 1])) {
  splitIndex -= 1;
}
30 
return {
  firstName: parts.slice(0, splitIndex).join(' '),
  lastName: parts.slice(splitIndex).join(' '),
  suffix,
};
36}
37 
38export default splitFullName;

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Normalizing input first lets every later step assume clean, single-spaced text.
2Real-world names need special handling for suffixes, comma ordering, and surname particles like 'van' or 'de'.
3Returning a consistent object shape keeps callers simple no matter which branch runs.

Related explainers

php

<?php
 
class NameParser
{

Parsing a full name into components in PHP

string-parsing arrays normalization

Intermediate 8 steps

ruby

class UserAgentParser
  BROWSERS = [
    [/Edg\/([\d.]+)/, "Edge"],
    [/OPR\/([\d.]+)/, "Opera"],

Parsing user-agent strings in Ruby

regex pattern-matching lookup-tables

Intermediate 8 steps

javascript

function evaluate(expression) {
  const tokens = tokenize(expression);
  let pos = 0;

Building a recursive descent calculator

parsing recursion operator-precedence

Intermediate 8 steps

javascript

import { useState, useEffect, useCallback, useRef } from 'react';
 
const cache = new Map();
const inflight = new Map();

Building a stale-while-revalidate hook in React

caching request-deduplication custom-hooks

Advanced 10 steps

java

public static Map<String, String> parseCookieHeader(String header) {
    Map<String, String> cookies = new LinkedHashMap<>();
    if (header == null || header.isBlank()) {
        return cookies;

Parsing an HTTP Cookie header in Java

string-parsing http url-decoding

Intermediate 6 steps

javascript

import { useEffect, useRef, useState } from 'react';
 
export function useDelayedFlag(active, delay = 300) {
  const [visible, setVisible] = useState(false);