jquery / javascript: regex to replace instances of an html tag

Question

I'm trying to take some parsed XML data, search it for instances of the tag and replace that tag (and anything that may be inside the font tag), and replace it with a simple tag.

This is how I've been doing my regexes:

var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; //Test against valid email
console.log('regex: ' + emailReg.test(testString));

and so I figured the font regex would be something like this:

var fontReg = /'<'+font+'[^><]*>|<.'+font+'[^><]*>','g'/;
console.log('regex: ' + fontReg.test(testString));

but that isn't working. Anyone know a way to do this? Or what I might be doing wrong in the code above?

I noticed you tagged your question with jquery. Is this XML in the DOM? — namuol
– namuol, Commented Sep 28, 2011 at 19:58

Community · Accepted Answer · 2017-05-23 11:55:39Z

4

I think namuol's answer will serve you better then any RegExp-based solution, but I also think the RegExp deserves some explanation.

JavaScript doesn't allow for interpolation of variable values in RegExp literals.

The quotations become literal character matches and the addition operators become 1-or-more quantifiers. So, your current regex becomes capable of matching these:

# left of the pipe `|`
'<'font'>
'<''''fontttt'>

# right of the pipe `|`
<@'font'>','g'
<@''''fontttttt'>','g'

But, it will not match these:

<font>
</font>

To inject a variable value into a RegExp, you'll need to use the constructor and string concat:

var fontReg = new RegExp('<' + font + '[^><]*>|<.' + font + '[^><]*>', 'g');

On the other hand, if you meant for literal font, then you just needed:

var fontReg = /<font[^><]*>|<.font[^><]*>/g;

Also, each of those can be shortened by using .?, allowing the halves to be combined:

var fontReg = new RegExp('<.?' + font + '[^><]*>', 'g');
var fontReg = /<.?font[^><]*>/g;

edited May 23, 2017 at 11:55

CommunityBot

11 silver badge

answered Sep 28, 2011 at 20:15

Jonathan Lonowski

124k35 gold badges203 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

David Hellsing Over a year ago

+1 nice answer. So replacing fonts with span would be something like: html = html.replace(/<(.?)font[^><]*>/g,'<$span>');

Jonathan Lonowski Over a year ago

@David Almost. Just missing a 1 in the replace: '<$1span>'. But, with that it should work.

Joseph Woodward Over a year ago

Fantastic answer, very thorough.

namuol · Accepted Answer · 2011-09-28 20:16:18Z

4

If I understand your problem correctly, this should replace all font tags with simple span tags using jQuery:

$('font').replaceWith(function () {
    return $('<span>').append($(this).contents());
});

Here's a working fiddle: http://jsfiddle.net/RhLmk/2/

edited Sep 28, 2011 at 20:16

answered Sep 28, 2011 at 19:56

namuol

10k6 gold badges44 silver badges54 bronze badges

1 Comment

bobince Over a year ago

+1 way way better than trying to hack at HTML source using crude regex

Collectives™ on Stack Overflow

jquery / javascript: regex to replace instances of an html tag

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related