Merge pull request #6 from kip-13/highlight-zero-width-characters

Highlight zero-width characters

Author: roymckenzie

src/inject/inject.css

@@ -17,3 +17,8 @@
   position: absolute;
   right: 0;
 }
+
+.zero-width-character:after {
+  color: red;
+  content: '\25CF';
+}

src/inject/inject.js

@@ -1,6 +1,19 @@
 (function() {
   let elementsWithZWCC = [];
 
+  /**
+   * Highlight zero-width character in DOM element
+   *
+   * @param  {dom node} element   A DOM node.
+   */
+  const highlightCharacters = function(element) {
+    const zeroWidthCharacters = String.fromCodePoint(...zeroWidthCharacterCodes);
+    const regExp = new RegExp(`([${zeroWidthCharacters}])`, 'g')
+
+    element.innerHTML = element.innerHTML
+      .replace(regExp, '$1<span class="zero-width-character"></span>');
+  };
+
   /**
   * Checks DOM element for zero-width character.
   *
@@ -22,10 +35,6 @@
         elementsWithZWCC.push(element)
       }
     });
-
-    elementsWithZWCC.forEach(function( element ) {
-      element.classList.add('zero-width-characters');
-    })
   }
 
   /**
@@ -59,7 +68,13 @@
   */
   const checkPage = function() {
     const allElements = document.getElementsByTagName('*');
-    [...allElements].forEach( checkElement );
+
+    [...allElements].forEach(checkElement);
+
+    elementsWithZWCC.forEach(function( element ) {
+      element.classList.add('zero-width-characters');
+      highlightCharacters(element);
+    });
   }
 
   chrome.extension.sendMessage({}, function(response) {