HTML ENTITIES

Standalone, zero-dependency JavaScript implementation powering this tool. Free to inspect, copy, and build upon.

function switchTab(id, el) {
    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
    el.classList.add('active');
    document.getElementById('panel-' + id).classList.add('active');
  }

  const NAMED = { amp:'&',lt:'<',gt:'>',quot:'"',apos:"'",nbsp:'\u00a0',copy:'\u00a9',reg:'\u00ae',trade:'\u2122',euro:'\u20ac',pound:'\u00a3',yen:'\u00a5',cent:'\u00a2',mdash:'\u2014',ndash:'\u2013',hellip:'\u2026',laquo:'\u00ab',raquo:'\u00bb',bull:'\u2022',hearts:'\u2665',spades:'\u2660',clubs:'\u2663',diams:'\u2666',larr:'\u2190',rarr:'\u2192',uarr:'\u2191',darr:'\u2193',harr:'\u2194',times:'\u00d7',divide:'\u00f7',plusmn:'\u00b1',sup2:'\u00b2',sup3:'\u00b3',frac12:'\u00bd',frac14:'\u00bc',frac34:'\u00be',deg:'\u00b0',micro:'\u00b5',para:'\u00b6',sect:'\u00a7',dagger:'\u2020',Dagger:'\u2021',permil:'\u2030',lsquo:'\u2018',rsquo:'\u2019',ldquo:'\u201c',rdquo:'\u201d',lsaquo:'\u2039',rsaquo:'\u203a',acute:'\u00b4',uml:'\u00a8',cedil:'\u00b8',agrave:'\u00e0',aacute:'\u00e1',acirc:'\u00e2',atilde:'\u00e3',auml:'\u00e4',aring:'\u00e5',aelig:'\u00e6',ccedil:'\u00e7',egrave:'\u00e8',eacute:'\u00e9',ecirc:'\u00ea',euml:'\u00eb',igrave:'\u00ec',iacute:'\u00ed',icirc:'\u00ee',iuml:'\u00ef',eth:'\u00f0',ntilde:'\u00f1',ograve:'\u00f2',oacute:'\u00f3',ocirc:'\u00f4',otilde:'\u00f5',ouml:'\u00f6',oslash:'\u00f8',ugrave:'\u00f9',uacute:'\u00fa',ucirc:'\u00fb',uuml:'\u00fc',yacute:'\u00fd',thorn:'\u00fe',yuml:'\u00ff' };
  const NAMED_INV = Object.fromEntries(Object.entries(NAMED).map(([k,v]) => [v,k]));

  function doEncode() {
    const input = document.getElementById('encodeInput').value;
    const encodeAll = document.getElementById('encodeAll').checked;
    const useNamed = document.getElementById('namedEntities').checked;
    if (!input) { document.getElementById('encodeOutput').textContent = '—'; return; }
    let result = '';
    for (const ch of input) {
      const code = ch.codePointAt(0);
      if (useNamed && NAMED_INV[ch]) { result += '&' + NAMED_INV[ch] + ';'; }
      else if (ch === '&') { result += '&amp;'; }
      else if (ch === '<') { result += '&lt;'; }
      else if (ch === '>') { result += '&gt;'; }
      else if (ch === '"') { result += '&quot;'; }
      else if (encodeAll && code > 127) { result += '&#' + code + ';'; }
      else { result += ch; }
    }
    document.getElementById('encodeOutput').textContent = result;
  }

  function doDecode() {
    const input = document.getElementById('decodeInput').value;
    if (!input) { document.getElementById('decodeOutput').textContent = '—'; return; }
    const el = document.createElement('textarea');
    el.innerHTML = input;
    document.getElementById('decodeOutput').textContent = el.value;
  }

  function copyOut(srcId, btnId) {
    const text = document.getElementById(srcId).textContent;
    if (text === '—') return;
    navigator.clipboard.writeText(text).catch(() => {});
    const btn = document.getElementById(btnId);
    btn.textContent = 'copied!'; btn.classList.add('copied');
    setTimeout(() => { btn.textContent = 'copy'; btn.classList.remove('copied'); }, 2000);
  }

  const ALL_ENTITIES = Object.entries(NAMED).map(([name, char]) => ({ name, char, num: char.codePointAt(0) }));

  function filterEntities() {
    const q = document.getElementById('entitySearch').value.toLowerCase();
    const filtered = q ? ALL_ENTITIES.filter(e => e.name.includes(q) || e.char.includes(q) || String(e.num).includes(q)) : ALL_ENTITIES;
    document.getElementById('entityCount').textContent = `Showing ${filtered.length} of ${ALL_ENTITIES.length} entities`;
    document.getElementById('entityGrid').innerHTML = filtered.map(e =>
      `<div class="entity-item" onclick="navigator.clipboard.writeText('&${e.name};')">
        <div class="entity-char">${e.char === '&' ? '&amp;' : e.char === '<' ? '&lt;' : e.char}</div>
        <div class="entity-name">&amp;${e.name};</div>
        <div class="entity-num">&#${e.num};</div>
      </div>`
    ).join('');
  }

  filterEntities();