title: Javascript Insert string at index of string ignoring html tags
body: <p>So my situation is I have a string that for example could be: 
  <code>Testing new  message  with an image</code>
  So at index 12 and index 21 of that string I would like to insert image tags.
  So I need help finding a way to insert 2 image tags at that string by index.
  The problem is if I just insert them both at the index they should be something like this would happen:
  <code>
  Testing new &lt;img src="&lt;img src="http://via.placeholder.com/350x150"/&gt;http://via.placeholder.com/350x150"/&gt; message with an image
  </code>
  So the problem is that it will insert the first string correctly, but then it will shift the index of the next img tag index, which will then try to put the next img tag in the previous one.</p>
  
  <p>There will be a dynamic number of images that I will be trying to add to a string so I need a solutions that basically looks at the string without the html tags and inserts it at the correct index, but still returns the string with the html tags in it.</p>
  
  <p>Thanks for looking!</p>
  
  <p>EDIT:
  What I have so far is:</p>
  
  <pre><code>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 = '&lt;p style="color:' + hexColor + ';display:inline;"&gt;' + username + '&lt;/p&gt;';
    addEmotesToString(emotes, message, function(newString) {
      var messageDiv = $('#chatMessages');
      var html = messageDiv.html();
    html += '&lt;br&gt;' + htmlString;
      html += '&lt;p style="color:white;display:inline;"&gt;: ' + newString + '&lt;/p&gt;';
      messageDiv.html(html);
    });
  }
  
  function addEmotesToString(emotes, string, callback) {
    var newString = string;
    var counter = 0;
    for (var i = 0; i &lt; emotes.length; i++) {\
      newString.splice(emotes[i].index, 0, '&lt;img src="' + emotes[i].url + '"/&gt;';
      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);
  }
  </code></pre>