JavaScript 中將字串轉換為 HTML

Anika Tabassum Era 2023年1月30日 2022年7月12日
  1. 使用 innerHTML 屬性將字串轉換為 HTML 物件
  2. 使用 DOMParser() 介面將字串轉換為 HTML 物件
  3. 使用 jQuery 確保在 HTML 中傳遞的字串的型別
JavaScript 中將字串轉換為 HTML

在 JavaScript 中,一些特定的約定使整體開發歷史提前一步被整合。同樣,定址字串的一種非靜態方法(以 HTML 元素捐贈模式的形式),然後將其作為唯一的物件傳遞給 HTML 主體。

這使介面動態化,並且可以解決許多原本很難呼叫的問題。

以下內容中的程式碼示例將演示如何實現這種轉換。首先,我們將傳遞帶有 innerHTML 屬性的字串。

在下一個示例中,我們將使用 DOM parse 方法。大多數情況下不鼓勵這種約定,因為它存在許多瀏覽器接受的問題。

在最後一節中,我們將檢查我們傳遞的字串是 HTML 物件還是隻是字串。讓我們潛入吧!

使用 innerHTML 屬性將字串轉換為 HTML 物件

在這裡,我們將有一個函式 stringToHTML,它將原始字串作為其引數。之後,我們將建立一個 div,並希望傳遞其中給出的字串。

我們也可以將它傳遞給 HTML 正文,但為了簡潔起見,我們需要一個 div 元素。

接下來,新建立的 div 將與例項 dom 相關聯(假設)。因此,對於 dom,我們將設定 innerHTML 屬性,然後傳遞字串。

return 將是我們建立的函式 stringToHTMLdom 例項。讓我們檢查一下程式碼行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="abc.js"></script>
</body>
</html>
var stringToHTML = function (str) {
	var dom = document.createElement('div');
	dom.innerHTML = str;
	return dom;

};
console.log(stringToHTML('<h1>Hello world!</h1><p>How are you today?</p>'));

輸出:

使用 innerHTML 屬性將字串轉換為 HTML 物件

使用 DOMParser() 介面將字串轉換為 HTML 物件

DOMParser() 通常被忽略或可以與條件一起使用。如果先前處理問題的方法被取消,那麼這段程式碼可能會觸發以備份該過程。

所以在這裡,我們將取一個 DOMParser() 介面的例項,該例項將由 parseFromString() 觸發。引數將是字串和它應該表示的 HTML 型別。

然後我們將例項 doc 傳遞給 HTML 正文。

程式碼片段:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="2.js"></script>
</body>
</html>
var stringToHTML = function (str) {
	var parser = new DOMParser();
    var doc = parser.parseFromString(str, 'text/html');
    return doc.body;
};
console.log(stringToHTML('<h1>Hello world!</h1><p>I am fine Thank you! ^_^</p>'));

輸出:

使用 DOMParser() 介面將字串轉換為 HTML 物件

使用 jQuery 確保在 HTML 中傳遞的字串的型別

在本節中,我們將確定總體任務。我們將檢查是否生成了 HTML 物件、型別等。

如果我們可以使用 jQuery 傳遞一個字串,它會以物件形式進入 HTML。雖然內容尚未預覽,但它已在 HTML 正文中建立了空間(不是永久的)。

所以,讓我們跳到程式碼塊。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="3.js"></script>
    <script>
        var stringToHTML = function (str) {
        var d = $(str);
        return d;
    }
    console.log(stringToHTML('<h1>Hello world!</h1><p>How are you today?</p>'));
    </script>
</body>
</html>

輸出:

使用 jQuery 確保 HTML 中傳入的字串的型別

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook

相關文章 - JavaScript String