JSFiddle - React, Tailwind, and code Playground

by Flying Gambit

HTML

<pre class="one">
    +
   +++
    +
</pre>


<pre class="two">
    + +   ++++  + ++  + + +
    + ++ +++ + +++ ++ + +++
    + ++ + + ++ + + + + ++ 
</pre>

JavaScript

// http://stackoverflow.com/questions/41272168/compare-text-inside-2-div-elements-using-javascript-or-jquery

function getVerticalPattern(pattern){
  var pattern = pattern.split("\n"); // split the pattern in to an array, each item represents each line
  var numLines = pattern.length; // Find the number of lines

  // Find the longest string
  var longestString = 0;
  for(var i=0; i<pattern.length; ++i){
      longestString = pattern[i].length;
  }

  // Rearrange the pattern
  var newPattern = [];
  for (var i=0; i<longestString; i++){
      for (var j=0; j<numLines; j++){
          if(pattern[j] && pattern[j].length){ // sometimes the split was creating empty strings ""
            newPattern.push(pattern[j][i]);
          }
      }   
  }
  return newPattern.join("");
}

function findPattern(testPattern, srcPattern){
  return (getVerticalPattern(srcPattern)).indexOf(getVerticalPattern(testPattern));
}

var srcPattern = document.getElementsByClassName("two")[0].innerHTML;
var testPattern = document.getElementsByClassName("one")[0].innerHTML;
var result = findPattern(testPattern, srcPattern);

if(result !== -1){
  console.log("pattern found");
}else{
  console.log("pattern not found");
}