用 HTML 元素替换部分字符串

Question

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

我正在使用以下脚本来执行我需要的操作，将 var data 视为一个对象数组，其中 data[objectAtIndex].text 具有以下示例字符串 {0} is the right answer，但它可以还包含 Something {0} fishy。字符串的 {0} 部分可以随时更改位置。

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

我使用的正则表达式看起来像 var pattern = /\{0\}/i;

现在，这一半起作用了，只是它将 select 元素转换为字符串，这会产生 [object HTMLSelectElement] 而不是实际元素本身。

我想要实际的元素，而不是这个的字符串表示，我真的找不到任何不使用 jQuery 的答案。

Answer 1

将您的元素包装在临时 <div> 中，然后获取其 .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);

Answer 2

通过使用 innerHTML，您正在使用标记。所以一个选择是，只使用标记（但更多选项如下）：

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

实例：

var data = {
  0: {
    text: "This is a <strong>test</strong> {0} Testing <em>1 2 3</em>"
  }
};
var i = 0;
var pattern = /\{0\}/i;
var textDiv = document.createElement("div");
textDiv.innerHTML = data[i].text.replace(pattern, "<select></select>");
document.body.appendChild(textDiv);

如果您不想使用标记，您可以在 {0} 之前附加字符串的一部分，然后是元素，然后是{0}:

之后的字符串

var select = document.createElement("select"),
    textDiv = document.createElement("div"),
    text = data[i].text,
    index = text.indexOf("{0}"); // No need for case-insensitivity
if (index === -1) {
    index = text.length;
}
textDiv.innerHTML = text.substring(0, index);
textDiv.appendChild(select);
if (index < text.length) {
    textDiv.insertAdjacentHTML("beforeend", text.substring(index + 3));
}

var data = {
  0: {
    text: "This is a <strong>test</strong> {0} Testing <em>1 2 3</em>"
  }
};
var i = 0;
var select = document.createElement("select"),
    textDiv = document.createElement("div"),
    text = data[i].text,
    index = text.indexOf("{0}"); // No need for case-insensitivity
if (index === -1) {
    index = text.length;
}
textDiv.innerHTML = text.substring(0, index);
textDiv.appendChild(select);
if (index < text.length) {
    textDiv.insertAdjacentHTML("beforeend", text.substring(index + 3));
}
document.body.appendChild(textDiv);

或者如果模式必须是一个正则表达式：

var select = document.createElement("select"),
    textDiv = document.createElement("div"),
    text = data[i].text,
    match = pattern.exec(text),
    index = match ? match.index : text.length;
textDiv.innerHTML = text.substring(0, index);
textDiv.appendChild(select);
if (match) {
    textDiv.insertAdjacentHTML("beforeend", text.substring(index + match[0].length));
}

var data = {
  0: {
    text: "This is a <strong>test</strong> {0} Testing <em>1 2 3</em>"
  }
};
var i = 0;
var pattern = /\{0\}/i;
var select = document.createElement("select"),
    textDiv = document.createElement("div"),
    text = data[i].text,
    match = pattern.exec(text),
    index = match ? match.index : text.length;
textDiv.innerHTML = text.substring(0, index);
textDiv.appendChild(select);
if (match) {
    textDiv.insertAdjacentHTML("beforeend", text.substring(index + match[0].length));
}
document.body.appendChild(textDiv);

Answer 3

这是最简单的解决方案。使用 select.outerHTML

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

广泛supported.

实例：

var text = "This is a <strong>test</strong> {0} Testing <em>1 2 3</em>"

var pattern = /\{0\}/i;

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

textDiv.innerHTML = text
document.body.appendChild(textDiv);

setTimeout(function(){
    textDiv.innerHTML = text.replace(pattern, select.outerHTML);
}, 1000)

用 HTML 元素替换部分字符串

Replacing part of string with a HTML Element

html

javascript

regex

string