tag highlighter

Process a string, looking for @something and #something and highlight them in the HTML

by Mike Collins

HTML

<h3>Enter Text Here</h3>
        <textarea id="input">@_NAN_DINI @InTheWordsOfK @maidros78 Self immolation is still a form of social protest in India. Remember the guy w…</textarea>
        <hr/>
        <div id="output"></div>

CSS

#input {
           font: 14px/1.2em Tahoma;
           height: 12em;
           width: 500px;
         }

         .class-at {
           color: blue;
         }

         .class-hash {
           color: green;
         }

JavaScript

var inEl = document.getElementById('input');
        var outEl = document.getElementById('output');

        function encodeStr(str) {
          return str.replace(/(\@\S+)/g, (key) => `<span class="class-at">${key}</span>`).replace(/(\#\S+)/g, (key) => `<span class="class-hash">${key}</span>`);
        }

        function inputHandler() {
          outEl.innerHTML = encodeStr(inEl.value);
        }

        inEl.addEventListener('input', inputHandler);
        inputHandler();