Javascript 将原始字符串源转换为html以使用jquery选择器

我有这个消息来源

<div class="page"><h1>First Page </h1></div>

---

如何将其转换为html并使用选择器，如

$（'.page'）

？我试图将上面的字符串分配给一个变量，然后使用

html（）

它不起作用。

你可以用html解析你的字符串，然后如果你查看返回的对象，第一行有一个

data

属性，它包含格式良好的html字符串

编辑

您可以获得HTML对象属性，而无需将其附加到DOM中。检查我编辑的代码

var test = '<div class="page"><h1>First Page </h1></div>';
var testHTML = $.parseHTML(test);
var elemHTML = $(testHTML[0].data);

console.log(elemHTML.text());

您可以尝试以下方法：

var测试='div class=“page”h1First page/h1/div'；
var testHTML=$.parseHTML（测试）；
$（“body”）.html（testHTML[0].data）；
$（“.page”）.css（“颜色”、“蓝色”）；
//DOM中没有append元素
var elemHTML=$（testHTML[0]。数据）；
log（elemHTML.text（））；
//对于元素的计数，您可以使用容器，而无需将其附加到DOM中
变量容器=$（“”）；
container.append（elemHTML）；
console.log（container.find（“.page”）.length）
.page{
颜色：红色；
}
您可以解析HTML中的字符串，之后如果查看返回的对象，第一行有一个
数据
属性，其中包含格式良好的HTML字符串

编辑

您可以获得HTML对象属性，而无需将其附加到DOM中。检查我编辑的代码

var test = '<div class="page"><h1>First Page </h1></div>';
var testHTML = $.parseHTML(test);
var elemHTML = $(testHTML[0].data);

console.log(elemHTML.text());

您可以尝试以下方法：


var测试='div class=“page”h1First page/h1/div'；
var testHTML=$.parseHTML（测试）；
$（“body”）.html（testHTML[0].data）；
$（“.page”）.css（“颜色”、“蓝色”）；
//DOM中没有append元素
var elemHTML=$（testHTML[0]。数据）；
log（elemHTML.text（））；
//对于元素的计数，您可以使用容器，而无需将其附加到DOM中
变量容器=$（“”）；
container.append（elemHTML）；
console.log（container.find（“.page”）.length）
.page{
颜色：红色；
}
请参见注释，首先我们必须处理实体，然后将结果作为HTML使用：


//字符串
var str='div class=“page”h1第一页/h1/div'；
//要将其放入的包装器元素
变量包装器=$（“”）；
//处理角色实体
html（str）；
str=wrapper.text（）；
//将生成的HTML转换为结构
html（str）；
console.log（“Text of.page:”，wrapper.find（“.page”）.Text（）
请参见注释，首先我们必须处理实体，然后将结果作为HTML使用：


//字符串
var str='div class=“page”h1第一页/h1/div'；
//要将其放入的包装器元素
变量包装器=$（“”）；
//处理角色实体
html（str）；
str=wrapper.text（）；
//将生成的HTML转换为结构
html（str）；
console.log（“Text of.page:”，wrapper.find（“.page”）.Text（）
您可以为此使用以下脚本

$('.page').html('<div class="page"><h1>First Page </h1></div>');

或

var htmlString = '<div class="page"><h1>First Page </h1></div>';
$('.page').html(htmlString);

Jquery自动将其转换为html
，您可以使用以下脚本进行此操作

$('.page').html('<div class="page"><h1>First Page </h1></div>');

或

var htmlString = '<div class="page"><h1>First Page </h1></div>';
$('.page').html(htmlString);

Jquery自动将其转换为html
字符串中是否真的包含这些字符实体？这似乎很奇怪。@T.J.Crowder我无法控制消息来源，这不是我问你的。我问它是否真的包含字符实体。你的字符串中真的有这些字符实体吗？这似乎很奇怪。@T.J.Crowder我无法控制消息来源，这不是我问你的。我问它是否真的包含角色实体。@Alexis:关于什么？你的代码可以工作。它确实会把它附加到页面上，这不是我对OP想要什么的印象，但我很容易就会有错误的印象。。。但是使用
$.parseHTML
可能比上面我的
div
更干净……我明白了。我承认我也不知道。考虑到你的回复，我认为我错了。这是太多的代码@T.J.Crowder，但为什么我不能做`$（x）。在我使用了$.parseHTML之后，像
var x=parseHTML（str）一样查找（'.page'）@NatelyJamerson：为了清楚起见，我把各个部分分开了。我回答了你的
。找到你在亚历克西斯回答时问的问题。@亚历克西斯：关于什么？你的代码可以工作。它确实会把它附加到页面上，这不是我对OP想要什么的印象，但我很容易就会有错误的印象。。。但是使用
$.parseHTML
可能比上面我的
div
更干净……我明白了。我承认我也不知道。考虑到你的回复，我认为我错了。这是太多的代码@T.J.Crowder，但为什么我不能做`$（x）。在我使用了$.parseHTML之后，像
var x=parseHTML（str）一样查找（'.page'）@NatelyJamerson：为了清楚起见，我把各个部分分开了。我回答了你的
.find
问题，你在Alexis的回答中问了这个问题。为什么我不能做$（testHTML）。find（'.page'）.length？@NatelyJamerson:因为
$（testHTML）
的结果是一个jQuery对象，在顶层有一个
div
。在
div
中没有
.page
元素，因此
.find（“.page”）
找不到任何元素。（
div
本身就是带有
页面的
类。）testHTML是由
$.parseHTML（）返回的一个大对象。我成功地使用了
$（“.page”）
选择器，因为我在正文中附加了html。所以我必须创建一个“假”div？我不想将str附加到DOM的任何位置。@NatelyJamerson:如果您想使用
查找
，是的，您需要一个包装器。无论是
div
还是
body
还是。。。或者，您可以执行
varx=$（testHTML）；x=x.find（“.page”）.add（x.filter（“.page”）
为什么我不能执行$（testHTML）.查找（'.page'）.length？@NatelyJamerson:因为
$（testHTML）
的结果是一个jQuery对象，其顶层有一个
div
。在
div
中没有
.page
元素，因此
.find（“.page”）
找不到任何元素。（
div
本身就是带有
page
类的一个。）