在 JavaScript 中将字符串转换为 HTML

码农六六

已于 2022-09-23 19:38:59 修改

阅读量1.7w

点赞数 5

分类专栏： JavaScript字符串方法文章标签： javascript html 前端

于 2022-08-30 13:52:10 首次发布

原文链接：https://www.delftstack.com/howto/javascript/javascript-string-to-html/

版权

JavaScript字符串方法专栏收录该内容

14 篇文章 0 订阅

订阅专栏

在 JavaScript 中，一些特定的约定使整体开发历史提前一步被集成。同样，寻址字符串的一种非静态方法（以 HTML 元素捐赠模式的形式），然后将其作为唯一的对象传递给 HTML 主体。

这使界面动态化，并且可以解决许多原本很难调用的问题。

以下内容中的代码示例将演示如何实现这种转换。首先，我们将传递带有innerHTML属性的字符串。

在下一个示例中，我们将使用该DOM parse方法。大多数情况下不鼓励这种约定，因为它存在许多浏览器接受的问题。

在最后一节中，我们将检查我们传递的字符串是 HTML 对象还是只是字符串。让我们潜入吧！

1.使用innerHTML属性将字符串转换为HTML对象

2. 使用DOMParser()接口将字符串转换为HTML对象

3.用于jQuery确保在HTML中传递的字符串的类型

1.使用innerHTML属性将字符串转换为HTML对象

在这里，我们将有一个函数stringToHTML，它将原始字符串作为其参数。之后，我们将创建一个div，并希望传递其中给出的字符串。

我们也可以将它传递给 HTML 正文，但为了整洁，我们需要一个div元素。

接下来，新创建的div将与一个实例相关联dom（假设）。因此，对于dom，我们将设置innerHTML属性，然后传递字符串。

将return是我们创建dom的函数的实例。stringToHTML让我们检查一下代码行。

<!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>'));

输出：

2. 使用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>'));

输出：

3.用于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>

输出：