資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用JavaScript檢查字串是否為HTML？
有時，開發者需要從JavaScript管理HTML。例如，開發者需要透過在JavaScript中訪問HTML元素，將一些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");
// 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元素，並使用元素的innerHTML屬性將字串作為元素的內部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字串。
7K+ 瀏覽量
