有時(shí)，開發(fā)人員需要通過 JavaScript 管理 HTML。例如，開發(fā)人員需要通過在 JavaScript 中訪問某些 HTML 節(jié)點(diǎn)來將它們附加到特定的 HTML 元素。
因此，在使用 JavaScript 將 HTML 字符串附加到任何 HTML 元素之前，我們需要評估要附加的字符串并檢查它是否有效。
如果我們附加具有開始選項(xiàng)卡但不包含結(jié)束標(biāo)記的 HTML 字符串，則可能會在網(wǎng)頁中生成錯(cuò)誤。因此，我們將學(xué)習(xí)使用 JavaScript 驗(yàn)證 HTML 字符串的不同方法。
使用正則表達(dá)式驗(yàn)證 HTML 字符串
程序員可以使用正則表達(dá)式來創(chuàng)建字符串的搜索模式。我們可以通過遵循完美匹配每個(gè) HTML 字符串的規(guī)則來創(chuàng)建正則表達(dá)式模式。
之后，我們可以使用正則表達(dá)式的test()方法，該方法返回作為參數(shù)傳遞的字符串與正則表達(dá)式的匹配結(jié)果。
語法
用戶可以按照下面的語法將正則表達(dá)式與 HTML 字符串進(jìn)行匹配。
let regexForHTML = /<([A-Za-z][A-Za-z0-9]*)\b[^>]*>(.*?)<\/\1>/; let isValid = regexForHTML.test(string);
登錄后復(fù)制
在上面的語法中，我們將字符串作為 test() 方法參數(shù)傳遞，該參數(shù)需要與 regexForHTML 正則表達(dá)式匹配。
正則表達(dá)式解釋
這里，我們已經(jīng)解釋了正則表達(dá)式，我們用它來匹配 HTML 字符串
正則表達(dá)式分為三部分。
]*> – 這是常規(guī)的第一部分表達(dá)式，它與 HTML 字符串的開始標(biāo)記相匹配。它建議開始標(biāo)簽應(yīng)包含“”。
(.*?) – 它是正則表達(dá)式的第二部分，表明打開標(biāo)簽后字符串應(yīng)至少包含一個(gè)字符。
– 這是正則表達(dá)式的第三部分，表示 HTML 字符串應(yīng)包含 ‘”。
示例
在下面的示例中，我們創(chuàng)建了兩個(gè)不同的字符串。 string1 是有效的 HTML 字符串，string2 是無效的字符串。
我們創(chuàng)建了 validateHTMLString() 函數(shù)，該函數(shù)使用 test() 方法將字符串與正則表達(dá)式進(jìn)行匹配。
<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>
登錄后復(fù)制
使用 HTML 元素的 nodeType 屬性
我們可以創(chuàng)建一個(gè)虛擬 HTML 元素，并使用該元素的 innnerHTML 屬性附加一個(gè)字符串作為該元素的內(nèi)部 HTML。之后，我們可以使用每個(gè)子節(jié)點(diǎn)的nodeType屬性來檢查它是否是HTML元素的類型。
對于任何 HTML 元素，其 nodeType 屬性值都等于 1。
語法
用戶可以按照以下語法使用 HTML 元素的 nodeType 屬性來驗(yàn)證 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
登錄后復(fù)制
在上面的語法中，我們檢查每個(gè)子節(jié)點(diǎn)的節(jié)點(diǎn)類型，以驗(yàn)證該字符串僅包含 HTML 節(jié)點(diǎn)。
步驟
用戶可以按照以下步驟來實(shí)現(xiàn)上述語法。
第 1 步 – 創(chuàng)建一個(gè)虛擬 HTML 元素。它可以是 div、p 或任何其他將字符串存儲為 HTML 的元素。
第2步 – 使用虛擬元素的innerHTML屬性，并將字符串作為HTML存儲到其中。
步驟 3 – 使用 childNodes 屬性獲取虛擬元素的所有子節(jié)點(diǎn)。
步驟 4 – 使用 for 循環(huán)迭代虛擬元素的每個(gè)子節(jié)點(diǎn)。
第5步 – 在for循環(huán)中，檢查每個(gè)子元素的節(jié)點(diǎn)類型，如果不等于1，則表示該字符串不是有效的HTML字符串，并返回任何從那里終止函數(shù)的值。
Step 6 – 如果迭代所有子節(jié)點(diǎn)時(shí)到達(dá)最后一個(gè)子節(jié)點(diǎn)，并且最后一個(gè)子節(jié)點(diǎn)也有效，則意味著 HTML 字符串有效并返回任意值以終止函數(shù)。
示例
在下面的示例中，我們創(chuàng)建了 validateHTMLString() 函數(shù)，該函數(shù)實(shí)現(xiàn)上述步驟來驗(yàn)證 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>
登錄后復(fù)制
用戶學(xué)習(xí)了三種不同的方法來檢查 HTML 字符串是否有效。最好的方法是使用正則表達(dá)式，它允許我們通過編寫一行代碼來驗(yàn)證 HTML 字符串。
以上就是如何使用 JavaScript 檢查字符串是否為 html？的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
