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

Replacing part of string with a HTML Element

本文关键字：一部分 字符串 替换 HTML 元素      更新时间：2023-09-26

我使用纯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的答案。

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

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

并得到广泛支持。

实例：

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)

将元素封装在临时<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);

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

相关文章：