Javascript在忽略html标签的字符串索引处插入字符串

Question

所以我的情况是我有一个字符串，例如可以是: Testing new message with an image因此，我想在该字符串的索引 12 和索引 21 处插入图像标签。因此，我需要帮助找到一种按索引在该字符串中插入 2 个图像标签的方法。问题是，如果我只是将它们都插入到索引处，它们应该会发生如下情况:
Testing new <img src="<img src="http://via.placeholder.com/350x150"/>http://via.placeholder.com/350x150"/> message with an image
所以问题是它会正确插入第一个字符串，但随后它会移动下一个 img 标签索引的索引，然后尝试将下一个 img 标签放入前一个 img 标签中。

我将尝试添加到字符串中的动态数量的图像，因此我需要一个解决方案，基本上查看没有 html 标签的字符串并将其插入到正确的索引处，但仍然返回字符串其中的 html 标签。

感谢您的浏览!

编辑:到目前为止我所拥有的是:

String.prototype.splice = function(idx, rem, str) {
    return this.slice(0, idx) + str + this.slice(idx + Math.abs(rem));
};
function addMessage(username, message, emotes, hexColor) {
    var htmlString = '<p style="color:' + hexColor + ';display:inline;">' + username + '</p>';
  addEmotesToString(emotes, message, function(newString) {
    var messageDiv = $('#chatMessages');
    var html = messageDiv.html();
  html += '<br>' + htmlString;
    html += '<p style="color:white;display:inline;">: ' + newString + '</p>';
    messageDiv.html(html);
  });
}

function addEmotesToString(emotes, string, callback) {
  var newString = string;
  var counter = 0;
  for (var i = 0; i < emotes.length; i++) {\
    newString.splice(emotes[i].index, 0, '<img src="' + emotes[i].url + '"/>';
    counter++;
    if (counter == emotes.length) {
      callback(newString);
    }
  }
}

function test() {
    var username = "newUser";
  var message = "Testing test  test  test";
  var hexColor = "#C3FF1F";
  var emotes = [{url: "imageurl", index: 13}, {url: "imageurl", index: 19}];
  addMessage(username, message, emotes, hexColor);
}

Answer 1

如果我理解你的意思，你想在字符串的中心添加一些内容。在这种情况下，您应该使用 substring 方法获取字符串的 leftSide 和 rightSide 。然后您可以将 leftSide 与您的内容和 rightSide 连接起来。我希望这会对您有所帮助。