HTML 엔터티: 이스케이프할 항목과 입력할 항목

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML entity encoder and decoder</title>
<style>
  body { margin: 0; padding: 14px; font-family: system-ui, sans-serif; background: #f4f5f7; color: #1d2330; }
  label { display: block; font-size: 13px; font-weight: 600; margin: 0 0 4px; }
  textarea, input[type=text] {
    width: 100%; box-sizing: border-box; padding: 8px 10px; font: 14px/1.4 ui-monospace, Consolas, monospace;
    border: 1px solid #cfd4dc; border-radius: 8px; background: #fff;
  }
  textarea { height: 58px; resize: vertical; }
  .opt { font-size: 13px; margin: 8px 0 10px; display: flex; gap: 6px; align-items: center; }
  .out { display: grid; grid-template-columns: 70px 1fr; gap: 6px 8px; font-size: 13px; }
  .out b { padding-top: 6px; }
  .out code {
    display: block; padding: 6px 8px; background: #fff; border: 1px solid #e1e4ea; border-radius: 6px;
    font: 13px/1.4 ui-monospace, Consolas, monospace; word-break: break-all; min-height: 18px;
  }
  .preview { margin: 10px 0 16px; padding: 10px 12px; background: #fff; border-radius: 8px; border: 1px dashed #9aa3b2; font-size: 16px; min-height: 22px; }
  .muted { color: #6b7280; font-size: 12px; font-weight: 400; }
  hr { border: 0; border-top: 1px solid #dde1e7; margin: 4px 0 12px; }
</style>
</head>
<body>
<label for="src">Text to escape</label>
<textarea id="src">Tom & Jerry <3 "cheese" © 2026 — café</textarea>
<div class="opt"><input type="checkbox" id="all"><label for="all" style="margin:0;font-weight:400">Also escape every non-ASCII character</label></div>

<div class="out">
  <b>Named</b><code id="named"></code>
  <b>Decimal</b><code id="dec"></code>
  <b>Hex</b><code id="hex"></code>
</div>
<div class="muted" style="margin-top:10px">What the browser shows for the named version:</div>
<div class="preview" id="preview" style="margin-top:4px"></div>

<hr>
<label for="enc">Entities to decode</label>
<input type="text" id="enc" value="5 &lt; 7 &amp;&amp; 7 &gt; 5 &rarr; &#10003; &#x2764;">
<div class="muted" style="margin-top:8px">Decoded text:</div>
<div class="preview" id="decoded" style="margin-top:4px"></div>

<script>
  // A few names. Characters without a name here fall back to a number.
  const NAMES = { '&': 'amp', '<': 'lt', '>': 'gt', '"': 'quot', "'": 'apos',
    '\u00A0': 'nbsp', '©': 'copy', '®': 'reg', '™': 'trade', '—': 'mdash', '–': 'ndash',
    '…': 'hellip', '€': 'euro', '£': 'pound', '×': 'times', '→': 'rarr', 'é': 'eacute' };
  const MUST = /[&<>"']/;  // the characters that can break markup

  function escape(text, style, all) {
    let out = '';
    for (const ch of text) {  // for...of walks whole characters, emoji included
      const cp = ch.codePointAt(0);
      if (!MUST.test(ch) && !(all && cp > 127)) { out += ch; continue; }
      if (style === 'named' && NAMES[ch]) out += '&' + NAMES[ch] + ';';
      else if (style === 'hex') out += '&#x' + cp.toString(16).toUpperCase() + ';';
      else out += '&#' + cp + ';';
    }
    return out;
  }

  function decode(html) {
    const t = document.createElement('textarea');
    t.innerHTML = html;  // the parser turns entities back into characters
    return t.value;
  }

  const src = document.getElementById('src');
  const all = document.getElementById('all');
  const enc = document.getElementById('enc');

  function update() {
    const named = escape(src.value, 'named', all.checked);
    document.getElementById('named').textContent = named;  // textContent: show the code as typed
    document.getElementById('dec').textContent = escape(src.value, 'dec', all.checked);
    document.getElementById('hex').textContent = escape(src.value, 'hex', all.checked);
    document.getElementById('preview').innerHTML = named;  // innerHTML: let the browser render it
  }
  function updateDecode() {
    document.getElementById('decoded').textContent = decode(enc.value);
  }

  src.addEventListener('input', update);
  all.addEventListener('change', update);
  enc.addEventListener('input', updateDecode);
  update();
  updateDecode();
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Normal space vs &amp;nbsp;</title>
<style>
  body { margin: 0; padding: 14px; font-family: system-ui, sans-serif; background: #f4f5f7; color: #1d2330; }
  .ctl { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-bottom: 12px; flex-wrap: wrap; }
  .ctl input[type=range] { flex: 1; min-width: 140px; }
  h3 { font-size: 13px; margin: 0 0 4px; }
  h3 code { font-size: 12px; background: #e6e9ee; padding: 0 4px; border-radius: 4px; }
  .box {
    width: 240px; max-width: 100%; box-sizing: border-box; margin-bottom: 14px;
    padding: 10px 12px; background: #fff; border: 1px solid #cfd4dc; border-radius: 8px;
    font-size: 16px; line-height: 1.5;
  }
  .show .nb { background: #d6f2df; border-radius: 3px; }  /* highlight the glued groups */
</style>
</head>
<body>
<div class="ctl">
  <label for="w">Box width</label>
  <input type="range" id="w" min="160" max="340" value="240">
  <output id="wv">240px</output>
  <label><input type="checkbox" id="mark" checked> Highlight glued words</label>
</div>

<h3>Normal spaces</h3>
<div class="box">The train leaves at 10 AM from platform 4, and the fare is 25 EUR.</div>

<h3>With <code>&amp;nbsp;</code> inside each group</h3>
<div class="box show" id="glued">The train leaves at <span class="nb">10&nbsp;AM</span> from <span class="nb">platform&nbsp;4</span>, and the fare is <span class="nb">25&nbsp;EUR</span>.</div>

<h3>Indented with <code>&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;</code> (don't)</h3>
<div class="box">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Step one: open the file and read the first line out loud.</div>

<h3>Indented with CSS <code>text-indent: 2em</code></h3>
<div class="box" style="text-indent: 2em">Step one: open the file and read the first line out loud.</div>

<script>
  const w = document.getElementById('w');
  const boxes = document.querySelectorAll('.box');

  w.addEventListener('input', () => {
    boxes.forEach((b) => { b.style.width = w.value + 'px'; });
    document.getElementById('wv').textContent = w.value + 'px';
  });

  document.getElementById('mark').addEventListener('change', (e) => {
    document.getElementById('glued').classList.toggle('show', e.target.checked);
  });
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML entity symbol picker</title>
<style>
  body { margin: 0; padding: 14px; font-family: system-ui, sans-serif; background: #f4f5f7; color: #1d2330; }
  input[type=search] {
    width: 100%; box-sizing: border-box; padding: 9px 11px; font-size: 15px;
    border: 1px solid #cfd4dc; border-radius: 8px;
  }
  .tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
  .tabs button {
    border: 1px solid #cfd4dc; background: #fff; border-radius: 99px; padding: 5px 11px; font-size: 13px; cursor: pointer;
  }
  .tabs button[aria-pressed=true] { background: #1d2330; color: #fff; border-color: #1d2330; }
  .grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px;
    height: 196px; overflow-y: auto; padding: 2px; align-content: start;
  }
  .grid button {
    height: 46px; font-size: 22px; background: #fff; border: 1px solid #e1e4ea; border-radius: 8px; cursor: pointer;
  }
  .grid button:hover, .grid button.on { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, .25); }
  .card {
    display: grid; grid-template-columns: 64px 1fr; gap: 4px 12px; align-items: center;
    margin-top: 12px; padding: 12px; background: #fff; border-radius: 10px; border: 1px solid #e1e4ea;
  }
  .card .big { grid-row: span 3; font-size: 44px; text-align: center; }
  .card div { font-size: 13px; }
  .card code { font: 14px ui-monospace, Consolas, monospace; background: #eef1f5; padding: 1px 5px; border-radius: 4px; }
  .status { margin-top: 8px; font-size: 13px; color: #0f5132; min-height: 18px; }
  .empty { grid-column: 1 / -1; color: #6b7280; font-size: 14px; }
</style>
</head>
<body>
<input type="search" id="q" placeholder="Search: arrow, euro, times, dash" aria-label="Search symbols">
<div class="tabs" id="tabs"></div>
<div class="grid" id="grid"></div>

<div class="card">
  <div class="big" id="big"></div>
  <div id="title"></div>
  <div>Named <code id="cName"></code></div>
  <div>Number <code id="cDec"></code> <code id="cHex"></code></div>
</div>
<div class="status" id="status">Click a symbol to copy its entity.</div>

<script>
  // [character, entity name ('' if HTML has none), words to search, group]
  const SYMBOLS = [
    ['←', 'larr', 'left arrow', 'Arrows'], ['→', 'rarr', 'right arrow', 'Arrows'],
    ['↑', 'uarr', 'up arrow', 'Arrows'], ['↓', 'darr', 'down arrow', 'Arrows'],
    ['↔', 'harr', 'left right arrow', 'Arrows'], ['⇐', 'lArr', 'double left arrow', 'Arrows'],
    ['⇒', 'rArr', 'double right arrow implies', 'Arrows'], ['⇔', 'hArr', 'double left right arrow', 'Arrows'],
    ['↵', 'crarr', 'return enter arrow', 'Arrows'],
    ['€', 'euro', 'euro', 'Currency'], ['£', 'pound', 'pound sterling', 'Currency'],
    ['¥', 'yen', 'yen yuan', 'Currency'], ['¢', 'cent', 'cent', 'Currency'],
    ['₹', '', 'indian rupee', 'Currency'], ['₩', '', 'korean won', 'Currency'], ['₿', '', 'bitcoin', 'Currency'],
    ['×', 'times', 'times multiply', 'Math'], ['÷', 'divide', 'divide', 'Math'],
    ['±', 'plusmn', 'plus minus', 'Math'], ['−', 'minus', 'minus sign', 'Math'],
    ['≠', 'ne', 'not equal', 'Math'], ['≤', 'le', 'less than or equal', 'Math'],
    ['≥', 'ge', 'greater than or equal', 'Math'], ['≈', 'asymp', 'almost equal approximately', 'Math'],
    ['∞', 'infin', 'infinity', 'Math'], ['√', 'radic', 'square root', 'Math'],
    ['°', 'deg', 'degree', 'Math'], ['²', 'sup2', 'squared superscript two', 'Math'],
    ['½', 'frac12', 'one half fraction', 'Math'], ['π', 'pi', 'pi', 'Math'], ['‰', 'permil', 'per mille', 'Math'],
    ['©', 'copy', 'copyright', 'Typography'], ['®', 'reg', 'registered', 'Typography'],
    ['™', 'trade', 'trademark', 'Typography'], ['—', 'mdash', 'em dash', 'Typography'],
    ['–', 'ndash', 'en dash range', 'Typography'], ['…', 'hellip', 'ellipsis dots', 'Typography'],
    ['“', 'ldquo', 'left double quote', 'Typography'], ['”', 'rdquo', 'right double quote', 'Typography'],
    ['‘', 'lsquo', 'left single quote', 'Typography'], ['’', 'rsquo', 'right single quote apostrophe', 'Typography'],
    ['«', 'laquo', 'left angle quote guillemet', 'Typography'], ['»', 'raquo', 'right angle quote guillemet', 'Typography'],
    ['•', 'bull', 'bullet', 'Typography'], ['·', 'middot', 'middle dot', 'Typography'],
    ['§', 'sect', 'section', 'Typography'], ['¶', 'para', 'paragraph pilcrow', 'Typography'],
    ['†', 'dagger', 'dagger footnote', 'Typography'], ['✓', 'check', 'check mark tick', 'Typography'],
    ['<', 'lt', 'less than', 'Must escape'], ['>', 'gt', 'greater than', 'Must escape'],
    ['&', 'amp', 'ampersand and', 'Must escape'], ['"', 'quot', 'double quote', 'Must escape'],
    ['\u00A0', 'nbsp', 'non-breaking space', 'Spaces'], ['\u2002', 'ensp', 'en space', 'Spaces'],
    ['\u2003', 'emsp', 'em space', 'Spaces'], ['\u2009', 'thinsp', 'thin space', 'Spaces'],
  ];
  const GROUPS = ['All', 'Arrows', 'Currency', 'Math', 'Typography', 'Must escape', 'Spaces'];
  let group = 'All';

  const $ = (id) => document.getElementById(id);
  const face = (ch) => (ch.trim() ? ch : '␣');  // spaces are invisible, so show a marker

  function codes(ch, name) {
    const cp = ch.codePointAt(0);
    return {
      named: name ? '&' + name + ';' : '',
      dec: '&#' + cp + ';',
      hex: '&#x' + cp.toString(16).toUpperCase() + ';',
    };
  }

  function show([ch, name, words]) {
    const c = codes(ch, name);
    $('big').textContent = face(ch);
    $('title').textContent = words;
    $('cName').textContent = c.named || 'none, use a number';
    $('cDec').textContent = c.dec;
    $('cHex').textContent = c.hex;
    return c.named || c.dec;  // what gets copied
  }

  async function copy(text) {
    try {
      await navigator.clipboard.writeText(text);
      $('status').textContent = 'Copied ' + text;
    } catch (err) {
      $('status').textContent = 'Copying is blocked here. Select the code above: ' + text;
    }
  }

  function render() {
    const q = $('q').value.trim().toLowerCase();
    const list = SYMBOLS.filter((s) =>
      (group === 'All' || s[3] === group) &&
      (!q || s[2].includes(q) || s[1].toLowerCase().includes(q) || s[0] === q));
    $('grid').replaceChildren();
    if (!list.length) {
      const p = document.createElement('div');
      p.className = 'empty';
      p.textContent = 'No match. Try another word.';
      $('grid').append(p);
    }
    list.forEach((s) => {
      const b = document.createElement('button');
      b.textContent = face(s[0]);
      b.title = s[2];
      b.addEventListener('click', () => {
        document.querySelectorAll('.grid .on').forEach((x) => x.classList.remove('on'));
        b.classList.add('on');
        copy(show(s));
      });
      $('grid').append(b);
    });
  }

  GROUPS.forEach((g) => {
    const b = document.createElement('button');
    b.textContent = g;
    b.setAttribute('aria-pressed', g === group);
    b.addEventListener('click', () => {
      group = g;
      document.querySelectorAll('#tabs button').forEach((x) => x.setAttribute('aria-pressed', x === b));
      render();
    });
    $('tabs').append(b);
  });

  $('q').addEventListener('input', render);
  render();
  show(SYMBOLS[1]);
</script>
</body>
</html>