add ignore white spaces to side by side view

README.md

@@ -376,6 +376,8 @@ The HTML output accepts a Javascript object with configuration. Possible options
   `false`
 - `matchingMaxComparisons`: perform at most this much comparisons for line matching a block of changes, default is
   `2500`
+- `ignoreWhiteSpaces`: ignore line with only repeated white spacings (Only in Side by side View), using recommended
+  matching type with this option is "words".
 - `maxLineSizeInBlockForComparison`: maximum number os characters of the bigger line in a block to apply comparison,
   default is `200`
 - `compiledTemplates`: object ([Hogan.js](https://github.com/twitter/hogan.js/) template values) with previously

src/render-utils.ts

@@ -37,13 +37,15 @@ export interface RenderConfig {
   matchWordsThreshold?: number;
   maxLineLengthHighlight?: number;
   diffStyle?: DiffStyleType;
+  ignoreWhiteSpaces?: boolean;
 }
 
 export const defaultRenderConfig = {
   matching: LineMatchingType.NONE,
   matchWordsThreshold: 0.25,
   maxLineLengthHighlight: 10000,
   diffStyle: DiffStyleType.WORD,
+  ignoreWhiteSpaces: false,
 };
 
 const separator = '/';

src/side-by-side-renderer.ts

@@ -203,6 +203,28 @@ export default class SideBySideRenderer {
     return doMatching ? matcher(oldLines, newLines) : [[oldLines, newLines]];
   }
 
+  ignoreWhiteSpaces(oldLines: DiffLine[], newLines: DiffLine[]): DiffLine[][] {
+    const maxLinesNumber = Math.max(oldLines.length, newLines.length);
+    const oldLinesProcessed = [];
+    const newLinesProcessed = [];
+    for (let i = 0; i < maxLinesNumber; i++) {
+      const oldLine = oldLines[i];
+      const newLine = newLines[i];
+      if (oldLine != undefined && newLine != undefined && oldLine.oldNumber == newLine.newNumber) {
+        const oldContent = oldLine.content.substr(1);
+        const newContent = newLine.content.substr(1);
+
+        const spaceMatch = /\s/g;
+        if (oldContent != newContent && oldContent.replace(spaceMatch, '') == newContent.replace(spaceMatch, ''))
+          continue;
+      }
+      oldLinesProcessed.push(oldLine);
+      newLinesProcessed.push(newLine);
+    }
+
+    return [oldLinesProcessed, newLinesProcessed];
+  }
+
   makeHeaderHtml(blockHeader: string, file?: DiffFile): string {
     return this.hoganUtils.render(genericTemplatesPath, 'block-header', {
       CSSLineClass: renderUtils.CSSLineClass,
@@ -217,8 +239,11 @@ export default class SideBySideRenderer {
       right: '',
       left: '',
     };
+    const [filteredOldLines, filteredNewLines] = this.config?.ignoreWhiteSpaces
+      ? this.ignoreWhiteSpaces(oldLines, newLines)
+      : [oldLines, newLines];
 
-    const maxLinesNumber = Math.max(oldLines.length, newLines.length);
+    const maxLinesNumber = Math.max(filteredOldLines.length, filteredNewLines.length);
     for (let i = 0; i < maxLinesNumber; i++) {
       const oldLine = oldLines[i];
       const newLine = newLines[i];

website/templates/pages/demo/content.handlebars

@@ -49,6 +49,12 @@
             checked />
         </label>
       </div>
+      <div class="column is-one-fifth-widescreen">
+        <label title="Show/Hide white spaces (only in side-by-side view)">
+          <p>Ignore white spaces(side-by-side only)</p>
+          <input class="options-label-value" id="diff-url-options-ignore-w-spaces" type="checkbox" name="drawFileList"/>
+        </label>
+      </div>
       <div class="column is-one-fifth-widescreen">
         <label title="Level of matching for the comparison algorithm">
           <p>Matching Type</p>

website/templates/pages/demo/demo.ts

@@ -206,6 +206,7 @@ type Elements = {
   };
   checkboxes: {
     drawFileList: HTMLInputElement;
+    ignoreWhiteSpaces: HTMLInputElement;
   };
 };
 
@@ -265,6 +266,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     },
     checkboxes: {
       drawFileList: getHTMLInputElementById('diff-url-options-show-files'),
+      ignoreWhiteSpaces: getHTMLInputElementById('diff-url-options-ignore-w-spaces'),
     },
   };
 
@@ -277,6 +279,7 @@ document.addEventListener('DOMContentLoaded', async () => {
   config.matchWordsThreshold && (elements.options.wordsThreshold.value = config.matchWordsThreshold.toString());
   config.matchingMaxComparisons &&
     (elements.options.matchingMaxComparisons.value = config.matchingMaxComparisons.toString());
+  config.ignoreWhiteSpaces && (elements.checkboxes.ignoreWhiteSpaces.checked = config.ignoreWhiteSpaces);
 
   Object.entries(elements.options).forEach(([option, element]) =>
     element.addEventListener('change', () => {