title: HOW TO CHECK IF DOM ELEMENTS ARE CORRECTLY NESTED
body: <p>i need help with this coding challenge. </p>
  
  <p>Have the function HTMLElements(str) read the str parameter being passed which will be a string of HTML DOM elements and plain text. The elements that will be used are: b, i, em, div, p. For example: if str is <code>"&lt;div&gt;&lt;b&gt;&lt;p&gt;hello world&lt;/p&gt;&lt;/b&gt;&lt;/div&gt;"</code> then this string of DOM elements is nested correctly so your program should return the string true.</p>
  
  <p>If a string is not nested correctly, return the first element encountered where, if changed into a different element, would result in a properly formatted string. If the string is not formatted properly, then it will only be one element that needs to be changed. For example: if str is <code>"&lt;div&gt;&lt;i&gt;hello&lt;/i&gt;world&lt;/b&gt;"</code> then your program should return the string div because if the first  element were changed into a <code>&lt;b&gt;</code>, the string would be properly formatted.</p>
  
  <p>example:</p>
  
  <pre><code>Input: "&lt;div&gt;&lt;div&gt;&lt;b&gt;&lt;b/&gt;&lt;/div&gt;&lt;p/&gt;"
  output: &lt;div&gt;
  </code></pre>
  
  <pre><code>Input: "&lt;div&gt;abc&lt;/div&gt;&lt;p&gt;&lt;em&gt;&lt;i&gt;test test test&lt;/b&gt;&lt;/em&gt;&lt;/p&gt;"
  output: i
  </code></pre>
  
  <p>Here is how far I've gotten:</p>
  
  <pre><code>function HTMLElements(str) { 
  
   let openingTag = str.match(/&lt;\w+&gt;/g)
   let closingTag = str.match(/(&lt;\/\w+&gt;)/g)
   let strObj = {
    '&lt;div&gt;': '&lt;/div&gt;',
    '&lt;p&gt;': '&lt;/p&gt;',
    '&lt;i&gt;': '&lt;/i&gt;',
    '&lt;p&gt;': '&lt;/p&gt;',
    '&lt;em&gt;': '&lt;/em&gt;',  
    '&lt;b&gt;': '&lt;/b&gt;',
    }
  
    let unclosedElem = []
  
    for(let i=0; i&lt;openingTag.length; i++){
       console.log(closingTag)
      if(closingTag.indexOf(strObj[openingTag[i]]) ===-1){
        unclosedElem.push(closingTag.splice(closingTag.indexOf(strObj[openingTag[i]]),1))
      }
    }
    console.log(unclosedElem)
    if(unclosedElem.length === 0) return true;
    return unclosedElem[0]
  } 
  
  // keep this function call here 
  HTMLElements("&lt;div&gt;&lt;div&gt;&lt;b&gt;&lt;b/&gt;&lt;/div&gt;&lt;/p&gt;")
  </code></pre>
  
  <p>now i understand this is far from solving the challenge but i guess it's a start for me. I will eventually solve this but your inputs are appreciated</p>