emoji-identifier.html

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Emoji Identifier</title>
  <style>
* {
  box-sizing: border-box;
}

body {
font-family: Helvetica, Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #f5f5f5;
}

h1 {
color: #333;
margin-bottom: 10px;
}

.subtitle {
color: #666;
margin-bottom: 30px;
}

textarea {
width: 100%;
min-height: 150px;
padding: 12px;
font-size: 16px;
font-family: Helvetica, Arial, sans-serif;
border: 2px solid #ddd;
border-radius: 8px;
resize: vertical;
margin-bottom: 20px;
}

textarea:focus {
outline: none;
border-color: #4CAF50;
}

.results {
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.results h2 {
margin-top: 0;
color: #333;
font-size: 18px;
}

.emoji-list {
display: grid;
gap: 20px;
margin-top: 20px;
}

.emoji-item {
display: flex;
align-items: center;
gap: 20px;
padding: 15px;
background: #f9f9f9;
border-radius: 8px;
border: 1px solid #e0e0e0;
}

.emoji-display {
font-size: 48px;
line-height: 1;
min-width: 60px;
text-align: center;
}

.emoji-info {
flex: 1;
}

.emoji-name {
font-weight: bold;
color: #333;
margin-bottom: 5px;
}

.emoji-codepoint {
font-family: ‘Courier New’, monospace;
color: #666;
font-size: 14px;
}

.no-results {
color: #999;
text-align: center;
padding: 40px;
}
</style>

</head>
<body>
  <h1>Emoji identifier</h1>
  <p class="subtitle">Paste text below to identify all emojis</p>

  <textarea id="textInput" placeholder="Paste or type text with emojis here... 😊🎉✨"></textarea>

  <div class="results" id="results">
    <h2>Detected emojis</h2>
    <div class="no-results">No emojis detected yet</div>
  </div>

  <script type="module">
let emojiData = {};

// Load emoji data from unicode-emoji-json CDN
async function loadEmojiData() {
  try {
    const response = await fetch('https://cdn.jsdelivr.net/npm/unicode-emoji-json@0.7.0/data-by-emoji.json');
    emojiData = await response.json();
  } catch (error) {
    console.error('Failed to load emoji data:', error);
  }
}

function getCodePoints(char) {
  const codePoints = [];
  for (let i = 0; i < char.length; i++) {
    const code = char.charCodeAt(i);
    if (code >= 0xD800 && code <= 0xDBFF && i + 1 < char.length) {
      const high = code;
      const low = char.charCodeAt(i + 1);
      if (low >= 0xDC00 && low <= 0xDFFF) {
        const codePoint = (high - 0xD800) * 0x400 + (low - 0xDC00) + 0x10000;
        codePoints.push('U+' + codePoint.toString(16).toUpperCase().padStart(5, '0'));
        i++;
        continue;
      }
    }
    codePoints.push('U+' + code.toString(16).toUpperCase().padStart(4, '0'));
  }
  return codePoints.join(' ');
}

function extractEmojis(text) {
  const emojiRegex = /[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F1E0}-\u{1F1FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{1F900}-\u{1F9FF}\u{1F018}-\u{1F270}\u{238C}-\u{2454}\u{20D0}-\u{20FF}\u{FE00}-\u{FE0F}\u{1F170}-\u{1F251}\u{1FA70}-\u{1FAFF}\u{E0020}-\u{E007F}](\u{FE0F})?(\u{200D}[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F1E0}-\u{1F1FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{1F900}-\u{1F9FF}\u{1F018}-\u{1F270}\u{238C}-\u{2454}\u{20D0}-\u{20FF}\u{FE00}-\u{FE0F}\u{1F170}-\u{1F251}\u{1FA70}-\u{1FAFF}\u{E0020}-\u{E007F}](\u{FE0F})?)*(\u{1F3FB}|\u{1F3FC}|\u{1F3FD}|\u{1F3FE}|\u{1F3FF})?/gu;
  
  const matches = text.match(emojiRegex) || [];
  const seen = new Set();
  const unique = [];
  
  for (const emoji of matches) {
    if (!seen.has(emoji)) {
      seen.add(emoji);
      unique.push(emoji);
    }
  }
  
  return unique;
}

function displayEmojis(emojis) {
  const resultsDiv = document.getElementById('results');
  
  if (emojis.length === 0) {
    resultsDiv.innerHTML = '<h2>Detected emojis</h2><div class="no-results">No emojis detected yet</div>';
    return;
  }
  
  const emojiItems = emojis.map(emoji => {
    const data = emojiData[emoji];
    let name = 'Unknown Emoji';
    
    if (data && data.name) {
      // Capitalize first letter of each word
      name = data.name.split(' ')
        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
        .join(' ');
    }
    
    const codepoint = getCodePoints(emoji);
    
    return `
      <div class="emoji-item">
        <div class="emoji-display">${emoji}</div>
        <div class="emoji-info">
          <div class="emoji-name">${name}</div>
          <div class="emoji-codepoint">${codepoint}</div>
        </div>
      </div>
    `;
  }).join('');
  
  resultsDiv.innerHTML = `
    <h2>Detected emojis (${emojis.length})</h2>
    <div class="emoji-list">${emojiItems}</div>
  `;
}

const textInput = document.getElementById('textInput');
textInput.addEventListener('input', (e) => {
  const emojis = extractEmojis(e.target.value);
  displayEmojis(emojis);
});

// Load emoji data when page loads
loadEmojiData();
  </script>

</body>
</html>