I know how to do this in php, but I need this to be done in javascript/jquery.

I'm trying to something like the following:

$('#NewBox').html( $('#OldBox').html().Replace('/<img(.*)alt="(.*)"\>/g', "$2") );

I don't think javascript has a preg_replace, and all I know of is the replace method. using "g" should replace all instances with the 2nd parameter from the regex (being alt). Any idea why this isn't working?

UPDATE: (hopefully this better understands what I want)

I have a string such as this:

var str = 'This is a string with <img src="./images/logo.png" alt="logo" /> an image'

I want to replace all tags inside of that string with the alt so it's now:

'This is a string with logo an image'

I know how to do this in php, but I need this to be done in javascript/jquery.

I'm trying to something like the following:

$('#NewBox').html( $('#OldBox').html().Replace('/<img(.*)alt="(.*)"\>/g', "$2") );

I don't think javascript has a preg_replace, and all I know of is the replace method. using "g" should replace all instances with the 2nd parameter from the regex (being alt). Any idea why this isn't working?

UPDATE: (hopefully this better understands what I want)

I have a string such as this:

var str = 'This is a string with <img src="./images/logo.png" alt="logo" /> an image'

I want to replace all tags inside of that string with the alt so it's now:

'This is a string with logo an image'

• javascript
• jquery

• Ok, something might be going over my head, but what's the backslash for? – SaganRitual Commented Aug 8, 2013 at 22:18
• @GreatBigBore I just used it for escaping the text " like \"this\" " – MysteryDev Commented Aug 8, 2013 at 22:20
• 1 But you're escaping an angle-bracket. Why? – SaganRitual Commented Aug 8, 2013 at 22:21
• possible duplicate of RegEx match open tags except XHTML self-contained tags – Cole Tobin Commented Aug 8, 2013 at 22:22

2 Answers 2

Don't use regular expressions to manipulate HTML. Use DOM. That goes double when dealing in client side JavaScript as editing the HTML can break event handler binding.

Just get each image, loop over each of them, and replace with the value of the alt attribute.

$('img').each(function () {
  $(this).replaceWith(
    $(this).attr('alt')
  );
});

You should avoid regexes when you can safely work with a parsing tool. jQuery can parse that HTML for you.

var str = 'This is a string with <img src="./images/logo.png" alt="logo" /> an image';
console.log('input: '+str);

// first create an element and add the string as its HTML
var container = $('<div>').html(str);

// then use .replaceWith(function()) to modify the HTML structure
container.find('img').replaceWith(function() { return this.alt; })

// finally get the HTML back as string
var strAlt = container.html();
console.log('output: '+strAlt);

Output:

input: This is a string with <img src="./images/logo.png" alt="logo" /> an image
output: This is a string with logo an image 

See demo fiddle.