var data = '<img src="mycat.png" alt="A picture of an orange cat."> and <img src="apple.png" alt="An image of a red apple.">';
var faker = document.createElement('div');
faker.innerHTML = data;
for (var key in Object.keys(faker.getElementsByTagName('img'))){
  var elem = faker.getElementsByTagName('img')[key];
  var altProp = $(faker.getElementsByTagName('img')[key]).attr('alt');
  data = data.replace(elem.outerHTML, altProp);
}
console.log(data);

OUTPUT: A picture of an orange cat. and An image of a red apple.

That's what I want it to do, but if the format of the <img> div is different in any way at all, this will not work.

For instance, this does not work: "<img src='mycat.png' alt='A picture of an orange cat'></img>"

Anyone know of a trick to make this work?

I suspect that's because the browser is sanitising your string. I'm mostly guessing, though.

If I remember correctly, using single quotes for HTML attribute values is not valid. Must be double quotes, or an unquoted single word.
However, some browsers give you a little leeway and guess what you intended; converting your HTML to something valid when you create the element. This means that as soon as the browser parses the string as HTML, it gets corrected.

I strongly suspect that if you do this:

faker.innerHTML = data;
data = faker.innerHTML;

you will find that your data string has been corrected to valid HTML. Which should then make the rest of your function work.

(although, to be honest, I would be more inclined to replace the current element with the string within the loop, rather than doing text replacement)

I suspect that's because the browser is sanitising your string. I'm mostly guessing, though.

If I remember correctly, using single quotes for HTML attribute values is not valid. Must be double quotes, or an unquoted single word.

However, some browsers give you a little leeway and guess what you intended; converting your HTML to something valid when you create the element. This means that as soon as the browser parses the string as HTML, it gets corrected.

Aha! That has to be what's happening.

I strongly suspect that if you do this:

faker.innerHTML = data;
data = faker.innerHTML;

you will find that your data string has been corrected to valid HTML. Which should then make the rest of your function work.

Rock on! That works. Brilliant! Thank you!!!

I would be more inclined to replace the current element with the string within the loop, rather than doing text replacement

The only reason I'm not just replacing the element is it isn't an element yet. I'm pulling the string sent to addText() and converting it to plain text for the transcript.

It seems like pulling any alt properties that someone took the time to add their images would be a good idea.

The only reason I'm not just replacing the element is it isn't an element yet.

It becomes an element as soon as you put it into the fake div's innerHTML. It just isn't attached to the document. Your loop is already treating it as an element; so you could probably replace it with the text there, and then finish by retrieving faker.innerHTML to get the fully processed string. Probably a more robust option if you expect to add any more parsing in future.

It becomes an element as soon as you put it into the fake div's innerHTML. It just isn't attached to the document.

Oh!

Your loop is already treating it as an element; so you could probably replace it with the text there, and then finish by retrieving faker.innerHTML to get the fully processed string. Probably a more robust option if you expect to add any more parsing in future.

Dude, you rock! I'm gonna play with this code this afternoon.