如何使用 JavaScript 检查字符串是否为 html?
有时，开发人员需要从 JavaScript 管理 HTML。例如，开发人员需要通过在 JavaScript 中访问某些 HTML 节点来将其附加到特定的 HTML 元素。
因此，在使用 JavaScript 将 HTML 字符串附加到任何 HTML 元素之前，我们需要评估要附加的字符串并检查它是否有效。
如果我们附加的 HTML 字符串有一个开始标签但不包含结束标签，则可能会在网页中生成错误。因此，我们将学习使用 JavaScript 验证 HTML 字符串的不同方法。
使用正则表达式验证 HTML 字符串
程序员可以使用正则表达式为字符串创建搜索模式。我们可以通过遵循与每个 HTML 字符串完美匹配的规则来创建正则表达式模式。
之后，我们可以使用正则表达式的test()方法，该方法返回作为参数传递的字符串与正则表达式的匹配结果。
语法
用户可以按照以下语法将正则表达式与HTML字符串进行匹配。
let regexForHTML = /<([A-Za-z][A-Za-z0-9]*)\b[^>]*>(.*?)<\/\1>/; let isValid = regexForHTML.test(string);
在上面的语法中，我们将字符串作为test()方法参数传递，需要与regexForHTML正则表达式进行匹配。
正则表达式解释
这里，我们解释了用于匹配 HTML 字符串的正则表达式
正则表达式分为三个部分。
<([A-Za-z][A-Za-z0-9]*)\b[^>]*> − 这是正则表达式的第一部分，用于匹配 HTML 字符串的开始标记。建议开始标记应包含"<"，之后是一些字母和数字字符，最后是">"。
(.*?) − 它是正则表达式的第二部分，表示字符串在打开标签后应至少包含一个字符。
<\/\1> − 它是正则表达式的第三部分，表示 HTML 字符串应包含"</"，之后应包含与第一组相同的值，最后应包含">"。
示例
在下面的示例中，我们创建了两个不同的字符串。string1是有效的 HTML 字符串，而string2是无效的字符串。
我们创建了 validateHTMLString() 函数，该函数使用 test() 方法将字符串与正则表达式进行匹配。
<html>
<body>
<h3>Using the <i>regular expression</i> to validate the HTML string.</h2>
<div id = "output"> </div>
<script>
let Output = document.getElementById("output");
// 创建正则表达式
let regexForHTML = /<([A-Za-z][A-Za-z0-9]*)\b[^>]*>(.*?)<\/\1>/;
let string1 = "<b> Hello users! </b>";
let string2 = "<Hi there!>";
function validateHTMLString(string) {
// 检查正则表达式是否与字符串匹配
let isValid = regexForHTML.test(string);
if (isValid) {
Output.innerHTML += "The " + string + " is a valid HTML stirng <br/>";
}else{
Output.innerHTML += "The " + string + " is not a valid HTML stirng <br/>";
}
}
validateHTMLString(string1);
validateHTMLString(string2);
</script>
</body>
</html>
使用 HTML 元素的 nodeType 属性
我们可以创建一个虚拟 HTML 元素，并使用元素的 innnerHTML 属性将字符串作为元素的内部 HTML 附加。之后，我们可以使用每个子节点的 nodeType 属性来检查它是否是 HTML 元素的类型。
对于任何 HTML 元素，其 nodeType 属性的值都等于 1。
语法
用户可以按照以下语法使用 HTML 元素的 nodeType 属性来验证 HTML 字符串。
var element = document.createElement("p"); element.innerHTML = string; var childNodes = element.childNodes; for (var i = 0; i < childNodes.length; i++) { if (childNodes[i].nodeType != 1) { // string is not valid return; } if (childNodes[i].nodeType == 1 && i == childNodes.length - 1) { // string is valid return; } } // string is not valid
在上述语法中，我们检查每个子节点的节点类型，以验证字符串是否仅包含 HTML 节点。
步骤
用户可以按照以下步骤实现上述语法。
步骤 1 - 创建一个虚拟 HTML 元素。它可以是 div、p 或任何其他将字符串存储为 HTML 的元素。
步骤 2 - 使用虚拟元素的 innerHTML 属性，并将字符串作为 HTML 存储到其中。
步骤 3 - 使用 childNodes 属性获取虚拟元素的所有子节点。
步骤 4 - 使用 for 循环遍历虚拟元素的每个子节点。
步骤 5 - 在 for 循环中，检查每个子元素的节点类型，如果不等于 1，则表示该字符串不是有效的 HTML 字符串，并从那里返回任何值以终止函数。
步骤 6 - 如果在迭代所有子节点时到达最后一个子节点，并且最后一个子节点也有效，则表示 HTML 字符串有效并返回任何值以终止函数。
示例
在下面的示例中，我们创建了 validateHTMLString() 函数，它实现了上述步骤来验证 HTML 字符串。
<html>
<body>
<h3>Using the <i> node Type property </i> to validate the HTML string.</h3>
<div id = "output"> </div>
<script>
let output = document.getElementById("output");
let string1 = "<b> This is an valid HTML! </b>";
let string2 = "<Hi there!";
function validateHTMLString(string) {
var element = document.createElement("p");
element.innerHTML = string;
var childNodes = element.childNodes;
for (var i = 0; i < childNodes.length; i++) {
if (childNodes[i].nodeType != 1) {
output.innerHTML += "The string is not valid HTML string! <br/>";
return;
}
if (childNodes[i].nodeType == 1 && i == childNodes.length - 1) {
output.innerHTML += "The " + string + " is a valid HTML string! <br/>";
return;
}
}
output.innerHTML += "The string is not valid HTML string! <br/>";
}
validateHTMLString(string1);
validateHTMLString(string2);
</script>
</body>
</html>
用户学习了三种不同的方法来检查 HTML 字符串是否有效。最好的方法是使用正则表达式，它允许我们通过编写一行代码来验证 HTML 字符串。
