Convert all HTML tags to lowercase

@gregw74Jan 12.2007

For those who wouldn’t mind lending me some of their brain power I’d greatly appreciate it.

Basically, I’d like to convert any and all HTML tags (not attributes or content) to lowercase. Given that this would be best done with regular expressions, I’m not exactly sure what the syntax would be for detecting each opening and closing tag and then converting them accordingly.

Thank you!

to post a comment

JavaScript

17 Comments(s) _↴

@OverstatementJan 12.2007 — #Why would you want to do that? If this is about your other post, RE can be case insensitive when you search for tags.

@mjdamatoJan 12.2007 — #And, this is not a javascript question as you would need to convert all your tags in the source files.

@gregw74authorJan 12.2007 — #It's relevant to my previous post in that it's part of the same project, but that's all. What you did for me earlier was crucial more than you know and was needed regardless of what happens here. This is simply for all HTML tags instead of just the td or th tags.

This request is due to another JS script I'm using to scrub the HTML clean (removing excess Office tags) and it has some issues where it's case sensitive when it comes to HTML tags. It's not a huge deal since most of the tags in our pages are in lowercase, but some of the older ones may be in uppercase. I just want to avoid the train wreck from ever happening, just in case there are a good handful of them.

If I could just alter all tags beginning with "<XXXX " and just apply 'toLowerCase' to the information represented by the X's, I'd be golden. Same goes for all closing tags "/XXXX>".

@OverstatementJan 12.2007 — #Before everyone agrees with mjdamato, he is not actually trying to modify his HTML page. He just wants the user to paste HTML into a textarea which he can operate on.

@mrhooJan 12.2007 — #However you capitalize the tag names, if the document in the browser is

served as text/html ,it will return the tag names in upper case.

you could get an array of all the tags in a string and replace them one tag at a time

[CODE]function reCase(str){
 var M= str.match(/(< *w+)/g);
 var L= M.length;
 var temp='';
 for (var i=0; i<L;i++){
 var tem= M[i].substring(1);
 tem=tem.toLowerCase();
 
   if(temp.search(tem)!=-1)continue;
   var rx= new RegExp("(< */? *)"+tem,'gi');
   temp+= tem+'; '
   str= str.replace(rx,'$1'+tem);
  }
  str=str.replace(/> *</g,'>n<'); 
  return str;
 }[/CODE]

var str=document.documentElement.innerHTML;

var targ= document.getElementsByTagName('textarea');

targ[0].value=reCase(str);

@OverstatementJan 12.2007 — #Hmm...I never would have thought of that. Don't forget, he wants to replace the closing tags too.

@mrhooJan 12.2007 — #Yeah- I ran it with innerHTML and saw that right off. I edited the reg exp and the replace expression in that other post.

@mjdamatoJan 12.2007 — #Before everyone agrees with mjdamato, he is not actually trying to modify his HTML page. He just wants the user to paste HTML into a textarea which he can operate on.[/QUOTE]
How nice of the OP to adequately explain his problem.

@OverstatementJan 12.2007 — #Yeah- I ran it with innerHTML and saw that right off.

I edited the reg exp and the replace expression in that other post.[/QUOTE]
The only thing I don't understand are your last 2 Regular Expressions. And what's with all those brackets in your RE?

@mrhooJan 12.2007 — #I don't want to replace every 'P' in the HTML with 'p'- pat paulson would never forgive me. So I have to match on the start tag '<' '.
[CODE]str= str.replace(rx,'$1'+tem);[/CODE]
the $1 is the first subsection of the string that matched, either '<' or '</'- otherwise I'd lose them in the replace, since they are part of the match.The last rx is optional- to make sure the tags start on newlines.

@OverstatementJan 12.2007 — #I don't understand the

<i>
 </i>var rx= new RegExp("(&lt; */? *)"+tem,'gi');

Edit: I get it now. That was confusing.

@mrhooJan 12.2007 — #var rx= new RegExp("(< */? *)"+tem,'gi');[/QUOTE]
this is a regular expression constructor.

It takes 2 strings as arguments.

If its looking for '[B]<P[/B]' for instance

the regular expression it builds evaluates to: [B]/(< */? *)p/ig[/B]

This means, look for a [B]<[/B]

followed by any amount of whitespace [B] *[/B]

followed by a [B]possible [/B]slash [B]/[/B]character (/ is to escape the slash, so the regular expression doesn't get chopped off here),

and possibly some more whitespace [B] *[/B];

and then [B]p[/B]- the tag name that matched tem comes next.

[B]i [/B]means return without worrying about the case, and [B]g [/B]flags the match routine to find all of the matches in the string, and not just the first.

And the ( and ) mark the part before the tagname, and matches (and remembers) either < or </ for the replace operation

@OverstatementJan 12.2007 — #

<i>
 </i>tem=tem;

[/quote]
WTF?

@mrhooJan 12.2007 — #tem=tem.toLowerCase();

@OverstatementJan 12.2007 — #Just tested it. There can't be any whitespace after the < in HTML. But something like </ div> is fine.

@mrhooJan 13.2007 — #I made a false assumption, that people don't put white space before the start tag tagname- that was naive. Change the match to (/(< *w+)/g);

Thank you for pointing this out, Over.

[CODE]function reCase(str){
 var M= str.match(/(< *w+)/g);
 var L= M.length;
 var temp='';
 for (var i=0; i<L;i++){
 var tem= M[i].substring(1);
 tem=tem.toLowerCase();
 
   if(temp.search(tem+';')!=-1)continue;
   var rx= new RegExp("(< */? *)"+tem,'gi');
   temp+= tem+'; '
   str= str.replace(rx,'$1'+tem);
  }
  str=str.replace(/> *</g,'>n<'); 
  return str;
 }[/CODE]

@gregw74authorJan 13.2007 — #Truly amazing!! Thank you both for all your efforts here. I can't thank you enough, really. This is terrific! I envy the JS knowledge both of you have. I have a lot to learn, no doubt about it, but the more and more I learn about JS, the more I realize how powerful it is. A language worth knowing for sure.

If either of you can suggest some good books for reference and learning, don't hold back. ?

Also in #JavaScript _↴

Problems adding dynamic content Adding numbers in a form [RESOLVED] body onload() help

Success!

Help @gregw74 spread the word by sharing this article on Twitter...

Tweet This

Convert all HTML tags to lowercase

17 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Convert all HTML tags to lowercase

17 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

17 Comments(s) _↴

Also in #JavaScript _↴