JSFiddle - React, Tailwind, and code Playground

by Maxim

HTML

<script src="https://cdn.jsdelivr.net/lodash/4.17.3/lodash.min.js"></script>
<div class="one" style="display:none">
    +
   +++
    +
</div>

<div class="two" style="display:none">
    + +   ++++  + ++  + + +
    + ++ +++ + +++ ++ + +++
    + ++ + + ++ + + + + ++ 
</div>

<div class="target">
</div>

JavaScript

const two=document.getElementsByClassName("two")[0].innerHTML.split('\n')
const one=document.getElementsByClassName("one")[0].innerHTML.split('\n')
document.getElementsByClassName("target")[0].innerHTML=((pos=findText(two,one))
       ? `found at position ${pos}`
       : "not found")

function findText(text, search) {
  const width = maxWidth(search)-minTrim(search);
  const matcher = cut(search, minTrim(search),width).join('');
  return _.range(text[1].length) // create array of possible matches
    .map(col=>cut(text, col, width).join(''))
    .indexOf(matcher)+1; // and match with matcher
}

// Returns left padding size, e.g. 3 in the example
function minTrim(t) {
  return _.min(t.filter(s=>!!s).map(s=>s.length-_.trimStart(s).length))
}

// Returns window within $text at $start position with $width
function cut(text, start, width) {
  return text.map(s=>_.padEnd(s.substr(start,width),width))
}

// Returns maximum width of the line within text
function maxWidth(text) {
  return _.max(text.map(s=>s.length))
}