Text Emotion Highlighter Tool – Analyze & Highlight Emotions Online<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@4.4.1\/dist\/chart.umd.min.js\"><\/script>\n <style>\n .emo-happy { background: rgba(34,197,94,.18); border-bottom: 2px solid #22c55e; }\n .emo-anger { background: rgba(239,68,68,.18); border-bottom: 2px solid #ef4444; }\n .emo-sad { background: rgba(59,130,246,.18); border-bottom: 2px solid #3b82f6; }\n .emo-fear { background: rgba(168,85,247,.18); border-bottom: 2px solid #a855f7; }\n .emo-surprise{ background: rgba(249,115,22,.18); border-bottom: 2px solid #f97316; }\n .emo-love { background: rgba(236,72,153,.18); border-bottom: 2px solid #ec4899; }\n .emo-neutral { background: rgba(148,163,184,.15); border-bottom: 2px solid #94a3b8; }\n .token { padding: .1rem .15rem; border-radius: .375rem; }\n .glass { backdrop-filter: saturate(1.2) blur(4px); background: rgba(255,255,255,.7); }\n .dark .glass { background: rgba(30,41,59,.5); }\n <\/style>\n<\/head>\n<body class=\"h-full bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100\">\n <div class=\"max-w-6xl mx-auto px-4 py-6\">\n <header class=\"flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between mb-4\">\n <div>\n <h1 class=\"text-2xl sm:text-3xl font-bold tracking-tight\">Text Emotion Highlighter<\/h1>\n <p class=\"text-slate-500 dark:text-slate-400 text-sm\">Paste any text. Detect emotions. Highlight by color. See a live breakdown and export results.<\/p>\n <\/div>\n <div class=\"flex items-center gap-2\">\n <button id=\"toggleTheme\" class=\"px-3 py-2 rounded-xl border border-slate-300 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800 text-sm\">Toggle Theme<\/button>\n <a href=\"javascript:void(0)\" id=\"howItWorksBtn\" class=\"px-3 py-2 rounded-xl bg-slate-900 text-white dark:bg-white dark:text-slate-900 text-sm\">How it works<\/a>\n <\/div>\n <\/header>\n\n \n <div id=\"howItWorksModal\" class=\"fixed inset-0 hidden bg-black bg-opacity-50 flex items-center justify-center z-50\">\n <div class=\"bg-white dark:bg-slate-800 rounded-2xl p-5 shadow-xl max-w-lg w-full relative\">\n <button id=\"closeModal\" class=\"absolute top-3 right-3 text-gray-600 dark:text-gray-300 hover:text-red-500 text-xl\">×<\/button>\n <h2 class=\"text-xl font-bold mb-3\">How it Works<\/h2>\n <p class=\"text-gray-700 dark:text-gray-300 leading-relaxed text-sm\">\n This tool analyzes your text and highlights emotional words using different colors. \n <br><br>\n <strong>Step 1:<\/strong> Paste or type any text in the input box.<br>\n <strong>Step 2:<\/strong> Click <em>Analyze & Highlight<\/em>.<br>\n <strong>Step 3:<\/strong> Emotional words are highlighted in colors (e.g. Happy = Green, Sad = Blue, Anger = Red).<br>\n <strong>Step 4:<\/strong> View the breakdown and chart on the right panel.<br><br>\n It works 100% in your browser \u2014 no data is sent to any server.\n <\/p>\n <\/div>\n <\/div>\n\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\n \n <section class=\"glass rounded-2xl shadow-sm p-3 sm:p-4 border border-slate-200 dark:border-slate-800\">\n <div class=\"flex items-center justify-between mb-2\">\n <h2 class=\"font-semibold\">Input<\/h2>\n <div class=\"flex gap-2\">\n <button id=\"btnSample\" class=\"px-3 py-1 rounded-lg bg-slate-200 dark:bg-slate-800 text-xs\">Insert Sample<\/button>\n <button id=\"btnClear\" class=\"px-3 py-1 rounded-lg bg-slate-200 dark:bg-slate-800 text-xs\">Clear<\/button>\n <\/div>\n <\/div>\n <textarea id=\"inputText\" rows=\"5\" class=\"w-full rounded-xl border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-950 p-2.5 focus:outline-none focus:ring-2 focus:ring-indigo-500\" placeholder=\"Paste or type your text here...\"><\/textarea>\n\n <div class=\"mt-3 flex flex-wrap gap-2 text-sm\">\n <button id=\"btnAnalyze\" class=\"px-3 py-1.5 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white font-medium\">Analyze & Highlight<\/button>\n <button id=\"btnCopyHighlighted\" class=\"px-3 py-1.5 rounded-xl border border-slate-300 dark:border-slate-700\">Copy Highlighted (HTML)<\/button>\n <button id=\"btnDownloadHTML\" class=\"px-3 py-1.5 rounded-xl border border-slate-300 dark:border-slate-700\">Download Result (HTML)<\/button>\n <button id=\"btnCopyPlain\" class=\"px-3 py-1.5 rounded-xl border border-slate-300 dark:border-slate-700\">Copy Plain Text<\/button>\n <\/div>\n\n <div class=\"mt-4\">\n <h3 class=\"font-semibold mb-1 text-sm\">Legend<\/h3>\n <div class=\"flex flex-wrap gap-1 text-xs\">\n <span class=\"px-1.5 py-0.5 rounded-lg border emo-happy\">Happy<\/span>\n <span class=\"px-1.5 py-0.5 rounded-lg border emo-anger\">Anger<\/span>\n <span class=\"px-1.5 py-0.5 rounded-lg border emo-sad\">Sad<\/span>\n <span class=\"px-1.5 py-0.5 rounded-lg border emo-fear\">Fear<\/span>\n <span class=\"px-1.5 py-0.5 rounded-lg border emo-surprise\">Surprise<\/span>\n <span class=\"px-1.5 py-0.5 rounded-lg border emo-love\">Love<\/span>\n <span class=\"px-1.5 py-0.5 rounded-lg border emo-neutral\">Neutral<\/span>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"glass rounded-2xl shadow-sm p-3 sm:p-4 border border-slate-200 dark:border-slate-800\">\n <div class=\"flex items-center justify-between mb-2\">\n <h2 class=\"font-semibold\">Highlighted Output<\/h2>\n <div class=\"text-xs text-slate-500\" id=\"tokenCount\">0 tokens<\/div>\n <\/div>\n <div id=\"output\" class=\"min-h-[80px] rounded-xl border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-950 p-3 leading-5\"><\/div>\n\n <div class=\"mt-4 grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div>\n <h3 class=\"font-semibold mb-1 text-sm\">Emotion Breakdown<\/h3>\n <ul id=\"summary\" class=\"space-y-1 text-xs\"><\/ul>\n <\/div>\n <div>\n <h3 class=\"font-semibold mb-1 text-sm\">Chart<\/h3>\n <canvas id=\"emoChart\" height=\"120\"><\/canvas>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n <\/div>\n\n <script>\n \/\/ ----- Emotion Lexicon & Helpers -----\n const EMO_LEX = {\n happy: ['happy','joy','glad','delighted','excited','great','awesome','fantastic','wonderful','pleased','satisfied','grateful','\u062e\u0648\u0634','\u062e\u0648\u0634\u06cc','\u062e\u0648\u0634\u062d\u0627\u0644','\u0645\u0632\u06c1','\u0645\u0632\u06c1 \u0622\u06cc\u0627','\u062e\u0648\u0634\u06af\u0648\u0627\u0631','\u062f\u0644\u0634\u0627\u062f','\u0916\u0941\u0936','\u0916\u0941\u0936\u0940','\u092e\u091c\u093c\u093e','\u092e\u091c\u093e','\u0938\u0902\u0924\u0941\u0937\u094d\u091f'],\n anger: ['angry','anger','furious','mad','annoyed','irritated','hate','rage','outrage','frustrated','resent','\u063a\u0635\u06c1','\u063a\u0635\u06cc\u0644\u0627','\u0646\u0641\u0631\u062a','\u0633\u062e\u062a \u0646\u0627\u0631\u0627\u0636','\u0628\u0631\u0627 \u0644\u06af\u0627','\u0917\u0941\u0938\u094d\u0938\u093e','\u0928\u092b\u093c\u0930\u0924','\u0916\u0940\u091c','\u0916\u092b\u093e'],\n sad: ['sad','sadness','unhappy','depressed','down','blue','sorrow','upset','cry','tears','heartbroken','\u0627\u062f\u0627\u0633','\u063a\u0645','\u063a\u0645\u06af\u06cc\u0646','\u0645\u0627\u06cc\u0648\u0633','\u0627\u0641\u0633\u0631\u062f\u06c1','\u0631\u0648 \u062f\u06cc\u0627','\u0622\u0646\u0633\u0648','\u0909\u0926\u093e\u0938','\u0917\u093c\u092e','\u092e\u093e\u092f\u0942\u0938','\u0906\u0901\u0938\u0942'],\n fear: ['fear','afraid','scared','terrified','anxious','anxiety','worry','worried','panic','phobia','nervous','\u0688\u0631','\u062e\u0648\u0641','\u06af\u06be\u0628\u0631\u0627\u06c1\u0679','\u0641\u06a9\u0631','\u062a\u0634\u0648\u06cc\u0634','\u0688\u0631 \u0644\u06af \u0631\u06c1\u0627','\u0921\u0930','\u0918\u092c\u0930\u093e\u0939\u091f','\u091a\u093f\u0902\u0924\u093e'],\n surprise: ['surprise','surprised','amazed','astonished','wow','unbelievable','shocked','whoa','unexpected','\u062d\u06cc\u0631\u062a','\u062d\u06cc\u0631\u0627\u0646','\u0648\u0627\u06c1','\u0627\u0648\u06c1','\u0646\u0627\u0642\u0627\u0628\u0644 \u06cc\u0642\u06cc\u0646','\u0939\u0948\u0930\u093e\u0928','\u0935\u093e\u0939','\u0905\u091a\u0930\u091c'],\n love: ['love','loved','lovely','dear','beloved','affection','care','admire','adore','romance','\u0645\u062d\u0628\u062a','\u067e\u06cc\u0627\u0631','\u0645\u062d\u0628\u0648\u0628','\u0639\u0632\u06cc\u0632','\u062e\u06cc\u0627\u0644 \u0631\u06a9\u06be\u062a\u0627','\u062f\u0644\u0631\u0628\u0627','\u092a\u094d\u092f\u093e\u0930','\u092a\u094d\u0930\u0947\u092e','\u092a\u094d\u092f\u093e\u0930\u093e','\u0905\u091c\u093c\u0940\u091c\u093c']\n };\n const CATEGORY_ORDER = ['happy','anger','sad','fear','surprise','love','neutral'];\n const CATEGORY_LABELS = { happy:'Happy', anger:'Anger', sad:'Sad', fear:'Fear', surprise:'Surprise', love:'Love', neutral:'Neutral' };\n\n function tokenize(text){ return text.split(\/(\\s+|[.,!?\u061b\u06d4\u060c!?\"\u201c\u201d()])\/).filter(t=>t!==undefined && t!=\"\"); }\n function categorizeToken(token){\n const clean = token.toLowerCase();\n for (const [cat, words] of Object.entries(EMO_LEX)){ if (words.some(w=>w.toLowerCase()===clean)) return cat; }\n return \/^[\\s.,!?\u061b\u06d4\u060c!?\"\u201c\u201d()]+$\/.test(token) ? null : 'neutral';\n }\n\n \/\/ ----- DOM Elements -----\n const inputEl=document.getElementById('inputText');\n const outputEl=document.getElementById('output');\n const summaryEl=document.getElementById('summary');\n const tokenCountEl=document.getElementById('tokenCount');\n const toggleBtn=document.getElementById('toggleTheme');\n let chart;\n\n \/\/ ----- Theme Toggle -----\n const THEME_KEY = 'th_emotion_theme';\n function applyTheme(theme){\n if(theme==='dark') document.documentElement.classList.add('dark');\n else document.documentElement.classList.remove('dark');\n toggleBtn.textContent = theme==='dark' ? 'Switch to Light' : 'Switch to Dark';\n }\n (function initTheme(){\n const stored = localStorage.getItem(THEME_KEY);\n if(stored){ applyTheme(stored); }\n else { applyTheme(window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'); }\n })();\n toggleBtn.addEventListener('click',()=>{const isDark=document.documentElement.classList.toggle('dark'); localStorage.setItem(THEME_KEY, isDark?'dark':'light'); applyTheme(isDark?'dark':'light');});\n\n \/\/ ----- Analysis -----\n function analyze(){\n const tokens=tokenize(inputEl.value||'');\n const counts={ happy:0, anger:0, sad:0, fear:0, surprise:0, love:0, neutral:0 };\n outputEl.innerHTML='';\n tokens.forEach(tok=>{\n const cat=categorizeToken(tok);\n if(cat){ counts[cat]++; const span=document.createElement('span'); span.className=`token emo-${cat}`; span.textContent=tok; span.title=CATEGORY_LABELS[cat]; outputEl.appendChild(span);}\n else outputEl.appendChild(document.createTextNode(tok));\n });\n tokenCountEl.textContent=`${tokens.length} tokens`;\n renderSummary(counts); renderChart(counts);\n }\n function renderSummary(counts){\n summaryEl.innerHTML='';\n const total=Object.values(counts).reduce((a,b)=>a+b,0)||1;\n CATEGORY_ORDER.forEach(cat=>{\n const li=document.createElement('li');\n const pct=Math.round((counts[cat]\/total)*100);\n li.innerHTML=`<div class=\"flex items-center justify-between gap-2\"><div class=\"flex items-center gap-1\"><span class=\"token emo-${cat} inline-block\"> <\/span><span>${CATEGORY_LABELS[cat]}<\/span><\/div><span>${counts[cat]} \u2022 ${pct}%<\/span><\/div>`;\n summaryEl.appendChild(li);\n });\n }\n function renderChart(counts){\n if(chart) chart.destroy();\n chart=new Chart(document.getElementById('emoChart'),{\n type:'bar',\n data:{ labels:CATEGORY_ORDER.map(c=>CATEGORY_LABELS[c]), datasets:[{data:CATEGORY_ORDER.map(c=>counts[c])}] },\n options:{ plugins:{legend:{display:false}}, scales:{y:{beginAtZero:true}} }\n });\n }\n\n \/\/ ----- Buttons -----\n document.getElementById('btnAnalyze').addEventListener('click',analyze);\n document.getElementById('btnClear').addEventListener('click',()=>{inputEl.value='';outputEl.innerHTML='';summaryEl.innerHTML='';tokenCountEl.textContent='0 tokens'; if(chart) chart.destroy();});\n document.getElementById('btnSample').addEventListener('click',()=>{inputEl.value=\"I am very happy today! \u0644\u06cc\u06a9\u0646 \u06a9\u0644 \u0645\u062c\u06be\u06d2 \u06a9\u0627\u0641\u06cc \u063a\u0635\u06c1 \u0622\u06cc\u0627 \u062a\u06be\u0627\u06d4 Honestly, I love my friends, \u0644\u06cc\u06a9\u0646 \u06a9\u0628\u06be\u06cc \u06a9\u0628\u06be\u06cc \u0645\u062c\u06be\u06d2 \u0688\u0631 \u0628\u06be\u06cc \u0644\u06af\u062a\u0627 \u06c1\u06d2\u06d4 Wow, that surprise party was unbelievable \u2014 \u0645\u06cc\u06ba \u062d\u06cc\u0631\u0627\u0646 \u0631\u06c1 \u06af\u06cc\u0627!\"; analyze();});\n\n \/\/ Modal\n const howItWorksBtn=document.getElementById('howItWorksBtn');\n const howItWorksModal=document.getElementById('howItWorksModal');\n const closeModal=document.getElementById('closeModal');\n howItWorksBtn.addEventListener('click',()=>howItWorksModal.classList.remove('hidden'));\n closeModal.addEventListener('click',()=>howItWorksModal.classList.add('hidden'));\n window.addEventListener('click',(e)=>{if(e.target===howItWorksModal){howItWorksModal.classList.add('hidden');}});\n\n \/\/ Copy\/Download\n document.getElementById('btnCopyPlain').addEventListener('click',()=>{navigator.clipboard.writeText(inputEl.value||'').then(()=>alert('Plain text copied to clipboard'))});\n document.getElementById('btnCopyHighlighted').addEventListener('click',()=>{navigator.clipboard.writeText(outputEl.innerHTML||'').then(()=>alert('Highlighted HTML copied to clipboard'))});\n document.getElementById('btnDownloadHTML').addEventListener('click',()=>{\n const blob = new Blob([`<div>${outputEl.innerHTML}<\/div>`], {type:'text\/html'});\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a'); a.href=url; a.download='highlighted-result.html'; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url);\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">How Text Emotion Highlighter Works<\/h2>\n\n\n\n<p>This tool analyzes your text and highlights emotional words using different colors.<br><br><strong>Step 1:<\/strong> Paste or type any text in the input box.<br><strong>Step 2:<\/strong> Click <em>Analyze & Highlight<\/em>.<br><strong>Step 3:<\/strong> Emotional words are highlighted in colors (e.g. Happy = Green, Sad = Blue, Anger = Red).<br><strong>Step 4:<\/strong> View the breakdown and chart on the right panel.<br><\/p>\n\n\n\n<div style=\"height:137px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-left has-x-large-font-size\">Recent Post<\/h3>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<ul style=\"color:#0388c2;\" class=\"wp-block-latest-posts__list is-grid columns-2 has-author has-link-color recent-posts-grid wp-elements-74f1e8fb7571cc9cdefc822fdcab980b wp-block-latest-posts has-text-color\"><li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/techoye.site\/index.php\/how-to-use-a-text-emotion-highlighter-for-daily-communication\/\">How to Use a Text Emotion Highlighter for Daily Communication<\/a><div class=\"wp-block-latest-posts__post-author\">by Admin<\/div><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/techoye.site\/index.php\/comparing-human-vs-ai-emotion-detection-in-text\/\">Comparing Human vs AI Emotion Detection in Text<\/a><div class=\"wp-block-latest-posts__post-author\">by Admin<\/div><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/techoye.site\/index.php\/features-you-should-look-for-in-an-emotion-analysis-tool\/\">Features You Should Look for in an Emotion Analysis Tool<\/a><div class=\"wp-block-latest-posts__post-author\">by Admin<\/div><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/techoye.site\/index.php\/top-10-ai-tools-for-emotion-detection-in-writing\/\">Top 10 AI Tools for Emotion Detection in Writing<\/a><div class=\"wp-block-latest-posts__post-author\">by Admin<\/div><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/techoye.site\/index.php\/text-emotion-highlighter-vs-sentiment-analyzer-whats-the-difference\/\">Text Emotion Highlighter vs Sentiment Analyzer: What\u2019s the Difference?<\/a><div class=\"wp-block-latest-posts__post-author\">by Admin<\/div><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/techoye.site\/index.php\/best-free-text-emotion-highlighter-tools-online\/\">Best Free Text Emotion Highlighter Tools Online<\/a><div class=\"wp-block-latest-posts__post-author\">by Admin<\/div><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/techoye.site\/index.php\/the-psychology-of-words-why-emotional-writing-matters\/\">The Psychology of Words: Why Emotional Writing Matters<\/a><div class=\"wp-block-latest-posts__post-author\">by Admin<\/div><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/techoye.site\/index.php\/emotional-tone-in-online-chats-what-it-reveals\/\">Emotional Tone in Online Chats: What It Reveals<\/a><div class=\"wp-block-latest-posts__post-author\">by Admin<\/div><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/techoye.site\/index.php\/detecting-stress-and-sadness-in-written-journals-with-ai-2\/\">Detecting Stress and Sadness in Written Journals with AI<\/a><div class=\"wp-block-latest-posts__post-author\">by Admin<\/div><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/techoye.site\/index.php\/detecting-stress-and-sadness-in-written-journals-with-ai\/\">Detecting Stress and Sadness in Written Journals with AI<\/a><div class=\"wp-block-latest-posts__post-author\">by Admin<\/div><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Text Emotion Highlighter Tool – Analyze & Highlight Emotions Online Text Emotion Highlighter Paste any text. Detect emotions. Highlight by color. See a live breakdown and export results. Toggle Theme How it works × How it Works This tool analyzes your text and highlights emotional words using different colors. Step 1: Paste or type any … <a title=\"Home\" class=\"read-more\" href=\"https:\/\/techoye.site\/\" aria-label=\"Read more about Home\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-24","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/techoye.site\/index.php\/wp-json\/wp\/v2\/pages\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/techoye.site\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/techoye.site\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/techoye.site\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/techoye.site\/index.php\/wp-json\/wp\/v2\/comments?post=24"}],"version-history":[{"count":18,"href":"https:\/\/techoye.site\/index.php\/wp-json\/wp\/v2\/pages\/24\/revisions"}],"predecessor-version":[{"id":188,"href":"https:\/\/techoye.site\/index.php\/wp-json\/wp\/v2\/pages\/24\/revisions\/188"}],"wp:attachment":[{"href":"https:\/\/techoye.site\/index.php\/wp-json\/wp\/v2\/media?parent=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":24,"date":"2025-08-22T11:18:15","date_gmt":"2025-08-22T11:18:15","guid":{"rendered":"https:\/\/techoye.site\/?page_id=24"},"modified":"2025-08-23T10:05:08","modified_gmt":"2025-08-23T10:05:08","slug":"home","status":"publish","type":"page","link":"https:\/\/techoye.site\/","title":{"rendered":"Home"},"content":{"rendered":"\n\n\n\n \n \n Text Emotion Highlighter Tool – Analyze & Highlight Emotions Online<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@4.4.1\/dist\/chart.umd.min.js\"><\/script>\n <style>\n .emo-happy { background: rgba(34,197,94,.18); border-bottom: 2px solid #22c55e; }\n .emo-anger { background: rgba(239,68,68,.18); border-bottom: 2px solid #ef4444; }\n .emo-sad { background: rgba(59,130,246,.18); border-bottom: 2px solid #3b82f6; }\n .emo-fear { background: rgba(168,85,247,.18); border-bottom: 2px solid #a855f7; }\n .emo-surprise{ background: rgba(249,115,22,.18); border-bottom: 2px solid #f97316; }\n .emo-love { background: rgba(236,72,153,.18); border-bottom: 2px solid #ec4899; }\n .emo-neutral { background: rgba(148,163,184,.15); border-bottom: 2px solid #94a3b8; }\n .token { padding: .1rem .15rem; border-radius: .375rem; }\n .glass { backdrop-filter: saturate(1.2) blur(4px); background: rgba(255,255,255,.7); }\n .dark .glass { background: rgba(30,41,59,.5); }\n <\/style>\n<\/head>\n<body class=\"h-full bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100\">\n <div class=\"max-w-6xl mx-auto px-4 py-6\">\n <header class=\"flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between mb-4\">\n <div>\n <h1 class=\"text-2xl sm:text-3xl font-bold tracking-tight\">Text Emotion Highlighter<\/h1>\n <p class=\"text-slate-500 dark:text-slate-400 text-sm\">Paste any text. Detect emotions. Highlight by color. See a live breakdown and export results.<\/p>\n <\/div>\n <div class=\"flex items-center gap-2\">\n <button id=\"toggleTheme\" class=\"px-3 py-2 rounded-xl border border-slate-300 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800 text-sm\">Toggle Theme<\/button>\n <a href=\"javascript:void(0)\" id=\"howItWorksBtn\" class=\"px-3 py-2 rounded-xl bg-slate-900 text-white dark:bg-white dark:text-slate-900 text-sm\">How it works<\/a>\n <\/div>\n <\/header>\n\n \n <div id=\"howItWorksModal\" class=\"fixed inset-0 hidden bg-black bg-opacity-50 flex items-center justify-center z-50\">\n <div class=\"bg-white dark:bg-slate-800 rounded-2xl p-5 shadow-xl max-w-lg w-full relative\">\n <button id=\"closeModal\" class=\"absolute top-3 right-3 text-gray-600 dark:text-gray-300 hover:text-red-500 text-xl\">×<\/button>\n <h2 class=\"text-xl font-bold mb-3\">How it Works<\/h2>\n <p class=\"text-gray-700 dark:text-gray-300 leading-relaxed text-sm\">\n This tool analyzes your text and highlights emotional words using different colors. \n <br><br>\n <strong>Step 1:<\/strong> Paste or type any text in the input box.<br>\n <strong>Step 2:<\/strong> Click <em>Analyze & Highlight<\/em>.<br>\n <strong>Step 3:<\/strong> Emotional words are highlighted in colors (e.g. Happy = Green, Sad = Blue, Anger = Red).<br>\n <strong>Step 4:<\/strong> View the breakdown and chart on the right panel.<br><br>\n It works 100% in your browser \u2014 no data is sent to any server.\n <\/p>\n <\/div>\n <\/div>\n\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\n \n <section class=\"glass rounded-2xl shadow-sm p-3 sm:p-4 border border-slate-200 dark:border-slate-800\">\n <div class=\"flex items-center justify-between mb-2\">\n <h2 class=\"font-semibold\">Input<\/h2>\n <div class=\"flex gap-2\">\n <button id=\"btnSample\" class=\"px-3 py-1 rounded-lg bg-slate-200 dark:bg-slate-800 text-xs\">Insert Sample<\/button>\n <button id=\"btnClear\" class=\"px-3 py-1 rounded-lg bg-slate-200 dark:bg-slate-800 text-xs\">Clear<\/button>\n <\/div>\n <\/div>\n <textarea id=\"inputText\" rows=\"5\" class=\"w-full rounded-xl border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-950 p-2.5 focus:outline-none focus:ring-2 focus:ring-indigo-500\" placeholder=\"Paste or type your text here...\"><\/textarea>\n\n <div class=\"mt-3 flex flex-wrap gap-2 text-sm\">\n <button id=\"btnAnalyze\" class=\"px-3 py-1.5 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white font-medium\">Analyze & Highlight<\/button>\n <button id=\"btnCopyHighlighted\" class=\"px-3 py-1.5 rounded-xl border border-slate-300 dark:border-slate-700\">Copy Highlighted (HTML)<\/button>\n <button id=\"btnDownloadHTML\" class=\"px-3 py-1.5 rounded-xl border border-slate-300 dark:border-slate-700\">Download Result (HTML)<\/button>\n <button id=\"btnCopyPlain\" class=\"px-3 py-1.5 rounded-xl border border-slate-300 dark:border-slate-700\">Copy Plain Text<\/button>\n <\/div>\n\n <div class=\"mt-4\">\n <h3 class=\"font-semibold mb-1 text-sm\">Legend<\/h3>\n <div class=\"flex flex-wrap gap-1 text-xs\">\n <span class=\"px-1.5 py-0.5 rounded-lg border emo-happy\">Happy<\/span>\n <span class=\"px-1.5 py-0.5 rounded-lg border emo-anger\">Anger<\/span>\n <span class=\"px-1.5 py-0.5 rounded-lg border emo-sad\">Sad<\/span>\n <span class=\"px-1.5 py-0.5 rounded-lg border emo-fear\">Fear<\/span>\n <span class=\"px-1.5 py-0.5 rounded-lg border emo-surprise\">Surprise<\/span>\n <span class=\"px-1.5 py-0.5 rounded-lg border emo-love\">Love<\/span>\n <span class=\"px-1.5 py-0.5 rounded-lg border emo-neutral\">Neutral<\/span>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"glass rounded-2xl shadow-sm p-3 sm:p-4 border border-slate-200 dark:border-slate-800\">\n <div class=\"flex items-center justify-between mb-2\">\n <h2 class=\"font-semibold\">Highlighted Output<\/h2>\n <div class=\"text-xs text-slate-500\" id=\"tokenCount\">0 tokens<\/div>\n <\/div>\n <div id=\"output\" class=\"min-h-[80px] rounded-xl border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-950 p-3 leading-5\"><\/div>\n\n <div class=\"mt-4 grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div>\n <h3 class=\"font-semibold mb-1 text-sm\">Emotion Breakdown<\/h3>\n <ul id=\"summary\" class=\"space-y-1 text-xs\"><\/ul>\n <\/div>\n <div>\n <h3 class=\"font-semibold mb-1 text-sm\">Chart<\/h3>\n <canvas id=\"emoChart\" height=\"120\"><\/canvas>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n <\/div>\n\n <script>\n \/\/ ----- Emotion Lexicon & Helpers -----\n const EMO_LEX = {\n happy: ['happy','joy','glad','delighted','excited','great','awesome','fantastic','wonderful','pleased','satisfied','grateful','\u062e\u0648\u0634','\u062e\u0648\u0634\u06cc','\u062e\u0648\u0634\u062d\u0627\u0644','\u0645\u0632\u06c1','\u0645\u0632\u06c1 \u0622\u06cc\u0627','\u062e\u0648\u0634\u06af\u0648\u0627\u0631','\u062f\u0644\u0634\u0627\u062f','\u0916\u0941\u0936','\u0916\u0941\u0936\u0940','\u092e\u091c\u093c\u093e','\u092e\u091c\u093e','\u0938\u0902\u0924\u0941\u0937\u094d\u091f'],\n anger: ['angry','anger','furious','mad','annoyed','irritated','hate','rage','outrage','frustrated','resent','\u063a\u0635\u06c1','\u063a\u0635\u06cc\u0644\u0627','\u0646\u0641\u0631\u062a','\u0633\u062e\u062a \u0646\u0627\u0631\u0627\u0636','\u0628\u0631\u0627 \u0644\u06af\u0627','\u0917\u0941\u0938\u094d\u0938\u093e','\u0928\u092b\u093c\u0930\u0924','\u0916\u0940\u091c','\u0916\u092b\u093e'],\n sad: ['sad','sadness','unhappy','depressed','down','blue','sorrow','upset','cry','tears','heartbroken','\u0627\u062f\u0627\u0633','\u063a\u0645','\u063a\u0645\u06af\u06cc\u0646','\u0645\u0627\u06cc\u0648\u0633','\u0627\u0641\u0633\u0631\u062f\u06c1','\u0631\u0648 \u062f\u06cc\u0627','\u0622\u0646\u0633\u0648','\u0909\u0926\u093e\u0938','\u0917\u093c\u092e','\u092e\u093e\u092f\u0942\u0938','\u0906\u0901\u0938\u0942'],\n fear: ['fear','afraid','scared','terrified','anxious','anxiety','worry','worried','panic','phobia','nervous','\u0688\u0631','\u062e\u0648\u0641','\u06af\u06be\u0628\u0631\u0627\u06c1\u0679','\u0641\u06a9\u0631','\u062a\u0634\u0648\u06cc\u0634','\u0688\u0631 \u0644\u06af \u0631\u06c1\u0627','\u0921\u0930','\u0918\u092c\u0930\u093e\u0939\u091f','\u091a\u093f\u0902\u0924\u093e'],\n surprise: ['surprise','surprised','amazed','astonished','wow','unbelievable','shocked','whoa','unexpected','\u062d\u06cc\u0631\u062a','\u062d\u06cc\u0631\u0627\u0646','\u0648\u0627\u06c1','\u0627\u0648\u06c1','\u0646\u0627\u0642\u0627\u0628\u0644 \u06cc\u0642\u06cc\u0646','\u0939\u0948\u0930\u093e\u0928','\u0935\u093e\u0939','\u0905\u091a\u0930\u091c'],\n love: ['love','loved','lovely','dear','beloved','affection','care','admire','adore','romance','\u0645\u062d\u0628\u062a','\u067e\u06cc\u0627\u0631','\u0645\u062d\u0628\u0648\u0628','\u0639\u0632\u06cc\u0632','\u062e\u06cc\u0627\u0644 \u0631\u06a9\u06be\u062a\u0627','\u062f\u0644\u0631\u0628\u0627','\u092a\u094d\u092f\u093e\u0930','\u092a\u094d\u0930\u0947\u092e','\u092a\u094d\u092f\u093e\u0930\u093e','\u0905\u091c\u093c\u0940\u091c\u093c']\n };\n const CATEGORY_ORDER = ['happy','anger','sad','fear','surprise','love','neutral'];\n const CATEGORY_LABELS = { happy:'Happy', anger:'Anger', sad:'Sad', fear:'Fear', surprise:'Surprise', love:'Love', neutral:'Neutral' };\n\n function tokenize(text){ return text.split(\/(\\s+|[.,!?\u061b\u06d4\u060c!?\"\u201c\u201d()])\/).filter(t=>t!==undefined && t!=\"\"); }\n function categorizeToken(token){\n const clean = token.toLowerCase();\n for (const [cat, words] of Object.entries(EMO_LEX)){ if (words.some(w=>w.toLowerCase()===clean)) return cat; }\n return \/^[\\s.,!?\u061b\u06d4\u060c!?\"\u201c\u201d()]+$\/.test(token) ? null : 'neutral';\n }\n\n \/\/ ----- DOM Elements -----\n const inputEl=document.getElementById('inputText');\n const outputEl=document.getElementById('output');\n const summaryEl=document.getElementById('summary');\n const tokenCountEl=document.getElementById('tokenCount');\n const toggleBtn=document.getElementById('toggleTheme');\n let chart;\n\n \/\/ ----- Theme Toggle -----\n const THEME_KEY = 'th_emotion_theme';\n function applyTheme(theme){\n if(theme==='dark') document.documentElement.classList.add('dark');\n else document.documentElement.classList.remove('dark');\n toggleBtn.textContent = theme==='dark' ? 'Switch to Light' : 'Switch to Dark';\n }\n (function initTheme(){\n const stored = localStorage.getItem(THEME_KEY);\n if(stored){ applyTheme(stored); }\n else { applyTheme(window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'); }\n })();\n toggleBtn.addEventListener('click',()=>{const isDark=document.documentElement.classList.toggle('dark'); localStorage.setItem(THEME_KEY, isDark?'dark':'light'); applyTheme(isDark?'dark':'light');});\n\n \/\/ ----- Analysis -----\n function analyze(){\n const tokens=tokenize(inputEl.value||'');\n const counts={ happy:0, anger:0, sad:0, fear:0, surprise:0, love:0, neutral:0 };\n outputEl.innerHTML='';\n tokens.forEach(tok=>{\n const cat=categorizeToken(tok);\n if(cat){ counts[cat]++; const span=document.createElement('span'); span.className=`token emo-${cat}`; span.textContent=tok; span.title=CATEGORY_LABELS[cat]; outputEl.appendChild(span);}\n else outputEl.appendChild(document.createTextNode(tok));\n });\n tokenCountEl.textContent=`${tokens.length} tokens`;\n renderSummary(counts); renderChart(counts);\n }\n function renderSummary(counts){\n summaryEl.innerHTML='';\n const total=Object.values(counts).reduce((a,b)=>a+b,0)||1;\n CATEGORY_ORDER.forEach(cat=>{\n const li=document.createElement('li');\n const pct=Math.round((counts[cat]\/total)*100);\n li.innerHTML=`<div class=\"flex items-center justify-between gap-2\"><div class=\"flex items-center gap-1\"><span class=\"token emo-${cat} inline-block\"> <\/span><span>${CATEGORY_LABELS[cat]}<\/span><\/div><span>${counts[cat]} \u2022 ${pct}%<\/span><\/div>`;\n summaryEl.appendChild(li);\n });\n }\n function renderChart(counts){\n if(chart) chart.destroy();\n chart=new Chart(document.getElementById('emoChart'),{\n type:'bar',\n data:{ labels:CATEGORY_ORDER.map(c=>CATEGORY_LABELS[c]), datasets:[{data:CATEGORY_ORDER.map(c=>counts[c])}] },\n options:{ plugins:{legend:{display:false}}, scales:{y:{beginAtZero:true}} }\n });\n }\n\n \/\/ ----- Buttons -----\n document.getElementById('btnAnalyze').addEventListener('click',analyze);\n document.getElementById('btnClear').addEventListener('click',()=>{inputEl.value='';outputEl.innerHTML='';summaryEl.innerHTML='';tokenCountEl.textContent='0 tokens'; if(chart) chart.destroy();});\n document.getElementById('btnSample').addEventListener('click',()=>{inputEl.value=\"I am very happy today! \u0644\u06cc\u06a9\u0646 \u06a9\u0644 \u0645\u062c\u06be\u06d2 \u06a9\u0627\u0641\u06cc \u063a\u0635\u06c1 \u0622\u06cc\u0627 \u062a\u06be\u0627\u06d4 Honestly, I love my friends, \u0644\u06cc\u06a9\u0646 \u06a9\u0628\u06be\u06cc \u06a9\u0628\u06be\u06cc \u0645\u062c\u06be\u06d2 \u0688\u0631 \u0628\u06be\u06cc \u0644\u06af\u062a\u0627 \u06c1\u06d2\u06d4 Wow, that surprise party was unbelievable \u2014 \u0645\u06cc\u06ba \u062d\u06cc\u0631\u0627\u0646 \u0631\u06c1 \u06af\u06cc\u0627!\"; analyze();});\n\n \/\/ Modal\n const howItWorksBtn=document.getElementById('howItWorksBtn');\n const howItWorksModal=document.getElementById('howItWorksModal');\n const closeModal=document.getElementById('closeModal');\n howItWorksBtn.addEventListener('click',()=>howItWorksModal.classList.remove('hidden'));\n closeModal.addEventListener('click',()=>howItWorksModal.classList.add('hidden'));\n window.addEventListener('click',(e)=>{if(e.target===howItWorksModal){howItWorksModal.classList.add('hidden');}});\n\n \/\/ Copy\/Download\n document.getElementById('btnCopyPlain').addEventListener('click',()=>{navigator.clipboard.writeText(inputEl.value||'').then(()=>alert('Plain text copied to clipboard'))});\n document.getElementById('btnCopyHighlighted').addEventListener('click',()=>{navigator.clipboard.writeText(outputEl.innerHTML||'').then(()=>alert('Highlighted HTML copied to clipboard'))});\n document.getElementById('btnDownloadHTML').addEventListener('click',()=>{\n const blob = new Blob([`<div>${outputEl.innerHTML}<\/div>`], {type:'text\/html'});\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a'); a.href=url; a.download='highlighted-result.html'; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url);\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">How Text Emotion Highlighter Works<\/h2>\n\n\n\n<p>This tool analyzes your text and highlights emotional words using different colors.<br><br><strong>Step 1:<\/strong> Paste or type any text in the input box.<br><strong>Step 2:<\/strong> Click <em>Analyze & Highlight<\/em>.<br><strong>Step 3:<\/strong> Emotional words are highlighted in colors (e.g. Happy = Green, Sad = Blue, Anger = Red).<br><strong>Step 4:<\/strong> View the breakdown and chart on the right panel.<br><\/p>\n\n\n\n<div style=\"height:137px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-left has-x-large-font-size\">Recent Post<\/h3>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<ul style=\"color:#0388c2;\" class=\"wp-block-latest-posts__list is-grid columns-2 has-author has-link-color recent-posts-grid wp-elements-74f1e8fb7571cc9cdefc822fdcab980b wp-block-latest-posts has-text-color\"><li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/techoye.site\/index.php\/how-to-use-a-text-emotion-highlighter-for-daily-communication\/\">How to Use a Text Emotion Highlighter for Daily Communication<\/a><div class=\"wp-block-latest-posts__post-author\">by Admin<\/div><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/techoye.site\/index.php\/comparing-human-vs-ai-emotion-detection-in-text\/\">Comparing Human vs AI Emotion Detection in Text<\/a><div class=\"wp-block-latest-posts__post-author\">by Admin<\/div><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/techoye.site\/index.php\/features-you-should-look-for-in-an-emotion-analysis-tool\/\">Features You Should Look for in an Emotion Analysis Tool<\/a><div class=\"wp-block-latest-posts__post-author\">by Admin<\/div><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/techoye.site\/index.php\/top-10-ai-tools-for-emotion-detection-in-writing\/\">Top 10 AI Tools for Emotion Detection in Writing<\/a><div class=\"wp-block-latest-posts__post-author\">by Admin<\/div><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/techoye.site\/index.php\/text-emotion-highlighter-vs-sentiment-analyzer-whats-the-difference\/\">Text Emotion Highlighter vs Sentiment Analyzer: What\u2019s the Difference?<\/a><div class=\"wp-block-latest-posts__post-author\">by Admin<\/div><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/techoye.site\/index.php\/best-free-text-emotion-highlighter-tools-online\/\">Best Free Text Emotion Highlighter Tools Online<\/a><div class=\"wp-block-latest-posts__post-author\">by Admin<\/div><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/techoye.site\/index.php\/the-psychology-of-words-why-emotional-writing-matters\/\">The Psychology of Words: Why Emotional Writing Matters<\/a><div class=\"wp-block-latest-posts__post-author\">by Admin<\/div><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/techoye.site\/index.php\/emotional-tone-in-online-chats-what-it-reveals\/\">Emotional Tone in Online Chats: What It Reveals<\/a><div class=\"wp-block-latest-posts__post-author\">by Admin<\/div><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/techoye.site\/index.php\/detecting-stress-and-sadness-in-written-journals-with-ai-2\/\">Detecting Stress and Sadness in Written Journals with AI<\/a><div class=\"wp-block-latest-posts__post-author\">by Admin<\/div><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/techoye.site\/index.php\/detecting-stress-and-sadness-in-written-journals-with-ai\/\">Detecting Stress and Sadness in Written Journals with AI<\/a><div class=\"wp-block-latest-posts__post-author\">by Admin<\/div><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Text Emotion Highlighter Tool – Analyze & Highlight Emotions Online Text Emotion Highlighter Paste any text. Detect emotions. Highlight by color. See a live breakdown and export results. Toggle Theme How it works × How it Works This tool analyzes your text and highlights emotional words using different colors. Step 1: Paste or type any … <a title=\"Home\" class=\"read-more\" href=\"https:\/\/techoye.site\/\" aria-label=\"Read more about Home\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-24","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/techoye.site\/index.php\/wp-json\/wp\/v2\/pages\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/techoye.site\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/techoye.site\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/techoye.site\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/techoye.site\/index.php\/wp-json\/wp\/v2\/comments?post=24"}],"version-history":[{"count":18,"href":"https:\/\/techoye.site\/index.php\/wp-json\/wp\/v2\/pages\/24\/revisions"}],"predecessor-version":[{"id":188,"href":"https:\/\/techoye.site\/index.php\/wp-json\/wp\/v2\/pages\/24\/revisions\/188"}],"wp:attachment":[{"href":"https:\/\/techoye.site\/index.php\/wp-json\/wp\/v2\/media?parent=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}