Replace regex-flags-* class with data-flags attribute

README.md

@@ -28,13 +28,13 @@ RegexColorizer.colorizeAll({
 
 // Optionally provide flags
 RegexColorizer.colorizeAll({
-  // Flags provided in CSS classes will override this
+  // Flags provided in data-flags attributes will override this
   flags: 'u',
 });
 
 // You can also just get the highlighting HTML for a specific pattern
 const pattern = '(?<=\\d)';
-const html = RegexColorizer.colorizePattern(pattern, {
+someElement.innerHTML = RegexColorizer.colorizePattern(pattern, {
   flags: 'u',
 });
 ```
@@ -47,10 +47,9 @@ In your HTML:
   <code class="regex">(?&lt;=\d)\p{L}\8</code>.
 
   And here's the same regex but with different rules from flag u:
-  <code class="regex regex-flags-u">(?&lt;=\d)\p{L}\8</code>.
+  <code class="regex" data-flags="u">(?&lt;=\d)\p{L}\8</code>.
 </p>
-<!-- Can include any valid flags in the class.
-Ex: class="regex regex-flags-gimsuyd" -->
+<!-- Can include any valid flags. Ex: data-flags="gimsuyd" -->
 ```
 
 ## Demo

demo/index.html

@@ -103,13 +103,13 @@ <h2>Usage</h2>
 
 // Optionally provide flags
 RegexColorizer.colorizeAll({
-  // Flags provided in CSS classes will override this
+  // Flags provided in data-flags attributes will override this
   flags: 'u',
 });
 
 // You can also just get the highlighting HTML for a specific pattern
 const pattern = '(?&lt;=\\d)';
-const html = RegexColorizer.colorizePattern(pattern, {
+someElement.innerHTML = RegexColorizer.colorizePattern(pattern, {
   flags: 'u',
 });</code></pre>
 
@@ -119,10 +119,9 @@ <h2>Usage</h2>
   &lt;code class="regex">(?&amp;lt;=\d)\p{L}\8&lt;/code>.
 
   And here's the same regex but with different rules from flag u:
-  &lt;code class="regex regex-flags-u">(?&amp;lt;=\d)\p{L}\8&lt;/code>.
+  &lt;code class="regex" data-flags="u">(?&amp;lt;=\d)\p{L}\8&lt;/code>.
 &lt;/p>
-&lt;!-- Can include any valid flags in the class.
-Ex: class="regex regex-flags-gimsuyd" --&gt;</code></pre>
+&lt;!-- Can include any valid flags. Ex: data-flags="gimsuyd" --&gt;</code></pre>
 
     <p>Output:</p>
     <div class="html-output-example">
@@ -131,7 +130,7 @@ <h2>Usage</h2>
         <code class="regex">(?&lt;=\d)\p{L}\8</code>.
 
         And here's the same regex but with different rules from flag u:
-        <code class="regex regex-flags-u">(?&lt;=\d)\p{L}\8</code>.
+        <code class="regex" data-flags="u">(?&lt;=\d)\p{L}\8</code>.
       </p>
     </div>
 
@@ -179,17 +178,12 @@ <h2>Usage</h2>
     }
 
     function setFlagsFor(id, flags) {
-      const el = document.getElementById(id);
-      const flagsClassPrefix = 'regex-flags-';
-      el.classList.forEach(cls => {
-        if (cls.startsWith(flagsClassPrefix)) {
-          el.classList.remove(cls);
-        }
+      document.getElementById(id).dataset.flags = flags;
+      RegexColorizer.colorizeAll({
+        selector: `#${id}`,
+        // Alternatively, if not using the `data-flags` attribute:
+        // flags,
       });
-      if (flags) {
-        el.classList.add(flagsClassPrefix + flags);
-      }
-      RegexColorizer.colorizeAll();
     }
   </script>
 

regex-colorizer.js

@@ -352,8 +352,8 @@ const RegexColorizer = (() => {
    * Returns HTML for displaying the given regex with syntax highlighting.
    * @param {string} pattern Regex pattern to be colorized.
    * @param {Object} [options]
-   * @param {string} [options.flags]
-   * @returns {string}
+   * @param {string} [options.flags] Any combination of valid flags.
+   * @returns {string} HTML with highlighting.
    */
   self.colorizePattern = (pattern, {
     flags = '',
@@ -683,26 +683,19 @@ const RegexColorizer = (() => {
   /**
    * Applies highlighting to all regex elements on the page, replacing their content with HTML.
    * @param {Object} [options]
-   * @param {string} [options.selector='.regex'] querySelectorAll value for elements to highlight.
-   * @param {string} [options.flags]
+   * @param {string} [options.selector='.regex'] `querySelectorAll` value: elements to highlight.
+   * @param {string} [options.flags] Any combination of valid flags. Overridden by `data-flags`
+   * attribute.
    */
   self.colorizeAll = ({
     selector = '.regex',
     flags = '',
   } = {}) => {
     const els = document.querySelectorAll(selector);
     els.forEach(el => {
-      let overrideFlags;
-      const flagsClassPrefix = 'regex-flags-';
-      for (const cls of el.classList.values()) {
-        if (cls.startsWith(flagsClassPrefix)) {
-          overrideFlags = cls.slice(flagsClassPrefix.length);
-          break;
-        }
-      }
       el.classList.add(styleId);
       el.innerHTML = self.colorizePattern(el.textContent, {
-        flags: overrideFlags || flags,
+        flags: el.dataset.flags || flags,
       });
     });
   };