Rumah > Artikel > hujung hadapan web > Bagaimana untuk menyemak sama ada rentetan adalah html menggunakan JavaScript?
Bagaimana untuk menyemak sama ada rentetan adalah html menggunakan JavaScript?
- 王林ke hadapan
- 2023-09-08 08:17:121339semak imbas
有时，开发人员需要通过 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 字符串
正则表达式分为三部分。
]*> - 这是常规的第一部分表达式，它与 HTML 字符串的开始标记相匹配。它建议开始标签应包含“”。
-
(.*?) - 它是正则表达式的第二部分，表明打开标签后字符串应至少包含一个字符。
- 这是正则表达式的第三部分，表示 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");
// Creating the regular expression
let regexForHTML = /<([A-Za-z][A-Za-z0-9]*)\b[^>]*>(.*?)<\/\1>/;
let string1 = "<b> Hello users! </b>";
let string2 = "<Hi there!>";
function validateHTMLString(string) {
// check if the regular expression matches the 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字符串，并返回任何从那里终止函数的值。
Step 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 字符串。
Atas ialah kandungan terperinci Bagaimana untuk menyemak sama ada rentetan adalah html menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!