我显然无法确定HTML片段是否有效而不知道文档的其余部分是什么样的(至少,我需要一个doctype才能知道我正在验证哪些规则)。但是给出以下HTML5片段:
<article><header></article>My header</header><p>My text</p></article>
我当然可以确定无效而没有看到文档的其余部分。那么,是否存在“临时有效”HTML或“有效提供它适合有效文档中某个位置”的事情?
还有比下面的伪代码更多吗?
def is_valid_fragment(fragment):
tmp = "<!doctype html><html><head><title></title></head><body>" + fragment + "</body></html>"
return my_HTML5_validator.is_valid_html5_document(tmp)
答案 0 :(得分:4)
你当然可以谈论一个 XML 文档well-formed,你可以从任何单个元素及其子元素构建一个文档。因此,您可以谈论单根XHTML5片段的格式良好。您可以通过将其作为一系列文档处理,或将其包装在一些合成容器元素中来处理多根片段(如<img/><img/>
) - 因为我们只讨论格式良好,那将是好的。
但是,HTML5仍然允许使用SGML自动关闭标记,例如<hr>
等,其自我关闭性只能通过诉诸doctype来确定。例如,<div><hr></div>
可以,但<div><tr></div>
不是。如果你处理DOM节点而不是文本作为输入,这将是一个非问题,但如果你有文本,你需要一个足够了解HTML的解析器来处理这些元素。除此之外,一些非常简单的规则,直接取自XML,足以处理良好的形式。
如果你想超越格式良好并查看validity的某些方面,我认为你仍然可以在XML的单根片段级别上做到这一点。正如规范所说:
如果XML文档具有关联的文档类型声明,并且文档符合其中表达的约束,则该文档有效。
DTD可以将任何元素命名为根,然后机制负责检查该元素与其子元素及其子元素之间的关系,以及构成有效性的各种其他约束。
同样,您可以将该想法直接转移到HTML。不过,我不知道你如何处理多根片段。请记住,某些整个文档约束(如ID是唯一的)可能会保留在片段内部,但一旦片段插入其中,就不会存在于其他有效文档中。
答案 1 :(得分:0)
一种粗略的方法是通过执行以下代码来检查是否通过另一个元素的innerHTML传递片段是否会更改文本。
<html>
<head>
</head>
<script>
function validateHTML(htmlFragment) {
var testDiv = document.getElementById('testDiv')
testDiv.innerHTML = htmlFragment
var res = htmlFragment==testDiv.innerHTML
testDiv.innerHTML = ""
return res
}
</script>
<body>
<div id=testDiv style='display:none'></div>
<textarea id=txtElem onKeyUp="this.style.backgroundColor = validateHTML(this.value) ? '' : '#f00'"></textarea>
</body>
</html>
答案 2 :(得分:0)
根据您打算进行此验证的方式,我认为您应该记住,浏览器对于格式错误的HTML表示非常宽容!
您在示例中提供的无效HTML字符串在(大多数(即使不是全部)浏览器中)也可以很好地工作:
const serializedHTML = "<article><header></article>My header</header><p>My text</p></article>"
const range = document.createRange()
const fragment = range.createContextualFragment(serializedHTML)
console.log(fragment)
上面片段中定义的片段内容将导致以下DOM树:
<article>
<header></header>
</article>
"My header"
<p>My text</p>
答案 3 :(得分:-3)
您可以检查它是否格式正确。