Javascript 用HTML元素替换字符串的一部分

我使用纯Javascript将字符串的一部分替换为HTML元素

我使用下面的脚本来做我需要的，考虑<代码> var数据<代码>是一个对象数组，其中<代码>数据[ObjutaTetry] .Text < /代码>有以下示例字符串<代码> { 0 }是正确的答案< /代码>，但它也可以包含<代码>某物{ 0 }鱼腥< /代码>。字符串的

{0}

部分可以随时更改位置

var select = document.createElement("select"),
    textDiv = document.createElement("div");
textDiv.innerHTML = data[i].text.replace(pattern, select);

我使用的正则表达式看起来像

var-pattern=/\{0\}/I

现在，这一点起到了一半的作用，只是它将select元素转换为string，从而生成
[object HTMLSelectElement]
，而不是实际的元素本身

我想要的是实际的元素，而不是这个元素的字符串表示形式，我找不到任何不使用jQuery的答案。
将元素包装在temp
中，然后获取它的
.innerHTML

var select = document.createElement("select"),
    textDiv = document.createElement("div"),
    tempDiv = document.createElement("div");

tempDiv.appendChild(select);
textDiv.innerHTML = data[i].text.replace(pattern, tempDiv.innerHTML);

将元素包装在temp
中，然后获取其
.innerHTML

var select = document.createElement("select"),
    textDiv = document.createElement("div"),
    tempDiv = document.createElement("div");

tempDiv.appendChild(select);
textDiv.innerHTML = data[i].text.replace(pattern, tempDiv.innerHTML);

通过使用
innerHTML
，您正在使用标记。因此，一个选项是，只需使用标记（但后面还有更多选项）：

var textDiv=document.createElement（“div”）；
textDiv.innerHTML=data[i].text.replace（模式“”）；

实例：


var数据={
0: {
文本：“这是一个测试{0}测试1 2 3”
}
};
var i=0；
var模式=/\{0\}/i；
var textDiv=document.createElement（“div”）；
textDiv.innerHTML=data[i].text.replace（模式“”）；
document.body.appendChild（textDiv）通过使用
innerHTML
，您正在使用标记。因此，一个选项是，只需使用标记（但后面还有更多选项）：

var textDiv=document.createElement（“div”）；
textDiv.innerHTML=data[i].text.replace（模式“”）；

实例：


var数据={
0: {
文本：“这是一个测试{0}测试1 2 3”
}
};
var i=0；
var模式=/\{0\}/i；
var textDiv=document.createElement（“div”）；
textDiv.innerHTML=data[i].text.replace（模式“”）；
document.body.appendChild（textDiv）以下是最简单的解决方案。使用
select.outerHTML

var select = document.createElement("select"),
    textDiv = document.createElement("div");
textDiv.innerHTML = data[i].text.replace(pattern, select.outerHTML);

而且广泛

实例：


var text=“这是一个测试{0}测试1 2 3”
var模式=/\{0\}/i；
var select=document.createElement（“选择”），
textDiv=document.createElement（“div”）；
textDiv.innerHTML=文本
document.body.appendChild（textDiv）；
setTimeout（函数（）{
textDiv.innerHTML=text.replace（模式，选择.outerHTML）；
}，1000）
以下是最简单的解决方案。使用
select.outerHTML

var select = document.createElement("select"),
    textDiv = document.createElement("div");
textDiv.innerHTML = data[i].text.replace(pattern, select.outerHTML);

而且广泛

实例：


var text=“这是一个测试{0}测试1 2 3”
var模式=/\{0\}/i；
var select=document.createElement（“选择”），
textDiv=document.createElement（“div”）；
textDiv.innerHTML=文本
document.body.appendChild（textDiv）；
setTimeout（函数（）{
textDiv.innerHTML=text.replace（模式，选择.outerHTML）；
}@T.J.Crowder:我想你可以使用
.outerHTML
，但我认为这并不是所有浏览器都支持的。那仍然是创建一个元素只是为了得到它的标记。@NichlasTorgersen，这就是为什么我的答案是相关的。对元素执行任何操作，只需调用元素即可。outerHtml@NichlasTorgersen：您也可以使用标记直接执行此操作。但是在任何情况下，在这里的各种答案中都有几个选项，包括直接使用您在循环中构建的元素（而不将其转换回标记）。创建一个元素只是为了获得它的标记似乎真的很迂回。@T.J.Crowder:我想您可以使用
.outerHTML
，但我认为并不是所有的浏览器都支持这一点。那仍然是创建一个元素来获取标记。@NichlasTorgersen，这就是为什么我的答案是相关的。对元素执行任何操作，只需调用元素即可。outerHtml@NichlasTorgersen：您也可以使用标记直接执行此操作。但在任何情况下，在这里的各种答案中都有几个选项，包括直接使用您在循环中构建的元素（而不将其转换回标记）。创建元素只是为了获取标记似乎真的很迂回。您假设OP想要的只是元素标记名。也许他们会想要更多。这种方法允许他们在将select节点转换为文本之前在select节点上使用DOM方法。或者，如果没有，那么应该附加所创建的元素，而不是通过标记和解析来完成。创建一个元素只是为了获取它的标记似乎真的很迂回。假设OP想要的只是元素标记名。也许他们会想要更多。这种方法允许他们在将select节点转换为文本之前在select节点上使用DOM方法。如果没有，那么就应该附加所创建的元素，而不是进行标记和解析。您会说，“我想要的是实际的元素，而不是这个元素的字符串表示形式”，但必须将innerHtml设置为字符串。您可以说，“我想要的是实际的元素，而不是这个元素的字符串表示形式”，但必须将innerHtml设置为字符串。