如何检查 DOM 元素是否正确嵌套

Question

我需要帮助来应对这个编码挑战。

让函数 HTMLElements(str) 读取传递的 str 参数，该参数将是 HTML DOM 元素和纯文本的字符串。将使用的元素是：b、i、em、div、p。例如：如果 str 是"<div><b><p>hello world</p></b></div>"，则该 DOM 元素字符串嵌套正确，因此您的程序应返回字符串 true。

如果字符串嵌套不正确，则返回遇到的第一个元素，如果更改为不同的元素，将产生格式正确的字符串。如果字符串的格式不正确，那么它只是一个需要更改的元素。例如：如果 str 是"<div><i>hello</i>world</b>"那么您的程序应该返回字符串 div 因为如果第一个元素更改为 a <b>，则该字符串将被正确格式化。

例子：

Input: "<div><div><b><b/></div><p/>"
output: <div>

Input: "<div>abc</div><p><em><i>test test test</b></em></p>"
output: i

这是我已经走了多远：

function HTMLElements(str) { 

 let openingTag = str.match(/<\w+>/g)
 let closingTag = str.match(/(<\/\w+>)/g)
 let strObj = {
  '<div>': '</div>',
  '<p>': '</p>',
  '<i>': '</i>',
  '<p>': '</p>',
  '<em>': '</em>',  
  '<b>': '</b>',
  }

  let unclosedElem = []

  for(let i=0; i<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("<div><div><b><b/></div></p>")

现在我明白这远未解决挑战，但我想这对我来说是一个开始。我最终会解决这个问题，但感谢您的意见

Answer 1

有几个问题。

首先，你正在做closingTag.indexOf(...) === -1. 如果它等于-1，则意味着根本没有找到该结束标记。但要求是“检测问题”，即使结束标记在这里，但顺序错误（未正确嵌套）。

因此，您可以做的第一个修复是：

closingTag.indexOf(...) !== closingTag.length - i

这将从结束标签数组的末尾开始向后计数。因为第一个开始标签对应于最后一个结束标签。

但是，我们有一个问题。indexOf将返回标签的第一次出现。但是如果我们有多个div标签嵌套在一起怎么办？它不知道你指的是哪一个。

我的建议是，不要使用 ，而是indexOf在开始标签数组中从左到右，而在结束标签数组中从右到左。一个简单的方法是使用.reverse()第二个数组，这样您就可以使用两个数组朝同一方向前进：

closingTag.indexOf(...) !== closingTag.length - i