Makes atomic tags configurable via additional parameter of diff function. Adds 'head' and 'style' to default list of atomic tags.

Author: mn4367

js/htmldiff.d.ts

@@ -7,8 +7,13 @@
  * @param {string} className (Optional) The class attribute to include in <ins> and <del> tags.
  * @param {string} dataPrefix (Optional) The data prefix to use for data attributes. The
  *     operation index data attribute will be named `data-${dataPrefix-}operation-index`.
+ * @param {string} atomicTags (Optional) List of tag names. The list has to be in the form 
+ *     'tag1|tag2|tag3|...' e. g. 'head|script|style|...'. An atomic tag is one whose child 
+ *     nodes should not be compared - the entire tag should be treated as one token. This is 
+ *     useful for tags where it does not make sense to insert <ins> and <del> tags.
+ *     If not used, the default list 'iframe|object|math|svg|script|head|style' will be used.
  *
  * @return {string} The combined HTML content with differences wrapped in <ins> and <del> tags.
  */
-declare function diff(before: string, after: string, className?: string, dataPrefix?: string): string;
+declare function diff(before: string, after: string, className?: string | null, dataPrefix?: string | null, atomicTags?: string | null): string;
 export = diff;

js/htmldiff.js

@@ -64,6 +64,14 @@
         return /--\>$/.test(word);
     }
 
+    /**
+     * Regular expression to check atomic tags.
+     * @see function diff.
+     */
+    var atomicTagsRegExp;
+    // Added head and style (for style tags inside the body)
+    var defaultAtomicTagsRegExp = new RegExp('^<(iframe|object|math|svg|script|head|style)');
+    
     /**
      * Checks if the current word is the beginning of an atomic tag. An atomic tag is one whose
      * child nodes should not be compared - the entire tag should be treated as one token. This
@@ -75,7 +83,7 @@
      *    null otherwise
      */
     function isStartOfAtomicTag(word){
-        var result = /^<(iframe|object|math|svg|script)/.exec(word);
+        var result = atomicTagsRegExp.exec(word);
         return result && result[1];
     }
 
@@ -897,12 +905,18 @@
      * @param {string} className (Optional) The class attribute to include in <ins> and <del> tags.
      * @param {string} dataPrefix (Optional) The data prefix to use for data attributes. The
      *      operation index data attribute will be named `data-${dataPrefix-}operation-index`.
+     * @param {string} atomicTags (Optional) List of atomic tag names. The list has to be in the 
+     *     form 'tag1|tag2|tag3|...' e. g. 'head|script|style|...'. If not used, the default list 
+     *     'iframe|object|math|svg|script|head|style' will be used.
      *
      * @return {string} The combined HTML content with differences wrapped in <ins> and <del> tags.
      */
-    function diff(before, after, className, dataPrefix){
+    function diff(before, after, className, dataPrefix, atomicTags){
         if (before === after) return before;
 
+        // Enable user provided atomic tag list.
+        atomicTags ? (atomicTagsRegExp = new RegExp('^<(' + atomicTags + ')')) : (atomicTagsRegExp = defaultAtomicTagsRegExp);
+
         before = htmlToTokens(before);
         after = htmlToTokens(after);
         var ops = calculateOperations(before, after);