有時，開發人員需要通過 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 字符串。
以上就是如何使用 JavaScript 檢查字符串是否為 html？的詳細內容，更多請關注www.92cms.cn其它相關文章！
