Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript / Regex / String

Js Regexp To Replace < And > Inside Element Attributes

Post a Comment
I'm looking to replace < and > with < and and > inside html element attributes, or in other words between =' and '. I attempted this myself but I'm just not mat

Solution 1:

You can do this with a while loop, that checks if there are still tags to replace:

var htmlString = '<divid="&lt;lol&gt;"><spantitle="&lt;&gt;&lt;&lt;&gt;&lt;&lt;&gt;&lt; fish">hover for fishies</span></div>';
while (htmlString.match(/="([^"]*)\&[gl]t;([^"]*)"/g)) {
    htmlString = htmlString.replace(/="([^"]*)\&gt;([^"]*)"/g, '="$1>$2"')
        .replace(/="([^"]*)\&lt;([^"]*)"/g, '="$1<$2"');
}

This loop will keep going until there are no &gt; or &lt; matches left in the HTML string.

The reason this can't be done in a single regex replace (or at least, as far as I know), is because you will need to match every &lt; or &gt; between the =" and ". With regex, that would mean you'd have to do something like /="([^"]*)(\&[lg]t;([^"]*))*"/g to match all of them, but that would mean you can't retrieve the capturing group anymore, which then would make replacing it with something impossible.

You can however also do this with a callback function on your replace:

var htmlString = '<divid="&lt;lol&gt;"><spantitle="&lt;&gt;&lt;&lt;&gt;&lt;&lt;&gt;&lt; fish">hover for fishies</span></div>';
htmlString = htmlString.replace(/="[^"]*\&[gl]t;[^"]*"/g, function(match) {
   return match.replace(/\&gt;/g, '>').replace(/\&lt;/g, '<'); 
});

That will first match every attribute that has either &lt; or &gt; in it, and then perform a replace on the matched part of the string.

Solution 2:

If you're doing this in the browser, try the following:

functionremoveDoubleEncoding( element ){
    Array.prototype.forEach.call( element.attributes, functionreplaceString( attribute ){
        attribute.value = attribute.value.replace( '&lt;', '<' ).replace( '&gt;', '>' );
    } );
}

Thus with:

<bodyclass="&lt;erg&gt;">

…you can apply the function as follows…

removeDoubleEncoding( document.body );

…and end up with:

<body class="<erg>">

Solution 3: 

string.replace(/="[^"]+"/g,function($0){return $0.replace(/&lt;/g,"<").replace(/&gt;/g,">");})

What this line does:

  • within the string, search for text that starts with =" and ends with "
  • within this text: replace all &lt; with <
  • within this text: replace all &gt; with >

In the function, $0 represents the matching string ="[^"]+".

Visit this page for more details on string replace.

Post a Comment for "Js Regexp To Replace < And > Inside Element Attributes"