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>");

实例：

＆＃13;

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

＆＃13;

如果你不想想要使用标记，你可以在{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));
}

＆＃13;

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

＆＃13;

或者，如果模式具有是正则表达式：

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));
}

＆＃13;

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

＆＃13;

Answer 3

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

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

并广泛supported。

实例：

＆＃13;

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)

＆＃13;

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

3 个答案: