Currently I have:
this.html(this.html().replace(/<\/?([i-z]+)[^>]*>/gi, function(match, tag) {
return (tag === 'p') ? match : '<p>';
return (tag === '/p') ? match : '</p>';
return (tag === 'script') ? match : 'script';
return (tag === '/script') ? match : '/script';
}));
However, the <p> and <script> tags are still being removed, what am I doing wrong?
You can't use multiple return statements with ternary operators like that. The first one will be evaluated and all the rest will be ignored. Use proper if statements or a switch statement,
if (tag === 'p')
return '<p>';
else if (tag === '/p')
return '</p>';
else if (tag === 'script')
return 'script';
else if (tag === '/script')
return '/script';
else
return match;
switch example:
switch (tag) {
case 'p': return '<p>';
case '/p': return '</p>';
//...
case default: return match;
}
You could also use an object as a map,
var map { 'p': '<p>', '/p' : '</p>' /*, ... */ };
return map[tag] || match;
or nested ternary operators,
return tag === 'p' ? '<p>'
: tag === '/p' ? '</p>'
: tag === 'script' ? '<script>'
: tag === '/script' ? '</script>'
: match;
But these are often less readable and harder to maintain.
Am pretty sure of this now, the regex doesnt work for closing tags, and only looking for i-z isnt catching the full tag.
Try the regex of:
/<\(/?[a-z]+)[^>]*>/gi
something odd happens with the code though when trying to return '<script>' when matching script so in these cases maybe return match
Andy E's head's suggestion of changing the if statement structure I think helps too, the main thing is the
else
return match;
or even do this as a default instead of specifically looking for p and script tags, it will return the match value of the matched tag if no if statement is met.
Code I wrote for testing:
<!DOCTYPE HTML>
<html>
<body>
<div id="manipulate">
<p>Hello</p>
<script type="text/ecmascript">
// test
</script>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/ecmascript"></script>
<script type="text/ecmascript">
$(document).ready(function(){
alert("start");
$("#manipulate").html($("#manipulate").html().replace(/<\/?([a-z]+)[^>]*>/gi, function(match, tag) {
alert(tag);
alert(match);
if (tag === 'p')
return '<p>';
else if (tag === '/p')
return '</p>';
else if (tag === 'script')
return match;
else if (tag === '/script')
return match;
else
return match;
}));
});
</script>
</body>
</html>