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标记放在前一个标记中。

我将尝试添加到字符串中的动态数量的图像，所以我需要一个解决方案，基本上看不带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联系起来。我希望这会对你有所帮助。

Answer 2

最简单的方法是按索引对表情进行排序，然后从最大的索引开始插入。如果从字符串的右侧开始，则不会影响下一个插入的索引。

function addMessage(message, emotes) {
  emotes.sort(function(a, b){ // sort by index, greatest first
    return b.index - a.index
  })
  emotes.forEach(function(e) {
    message = message.slice(0, e.index) + e.url + message.slice(e.index) 
  })
  return message
}

function test() {
  var message = "0123456789";
  var emotes = [{url: "one", index: 3}, {url: "two", index: 9}];
  return addMessage(message, emotes);
}
console.log(test())
// => 012one345678two9

Javascript在字符串索引处插入字符串，忽略html标记

2 个答案: