Need help with javascripts .replace function

[BlackDex]

Hello ppl,

i have an litle prob, and im not figuring it out.
It is getting me crazy.

What i want to happen is the following:
In: <td rowspan=4 width=125 valign=top class=ClassName>
Out: <td rowspan="4" width="125" valign="top" class="ClassName">

Thx in advanced
Greetz BlackDex

CODE:

 <script language="javascript" type="text/javascript"> 
 //<![CDATA[ 
  function testsample() 
  { 
   var samplestr1 = '<td rowspan=4 width=125 valign=top class=ClassName>'; 
   samplestr2 = samplestr1.replace(/([^=]*)=(.*?)([^ >])+/gim, function(str, v, z) 
   { 
    alert('str: ' + str + '\nv: ' + v + '\nz: ' + z); 
    return v + '"' + z + '"'; 
   }) 
   alert('samplestr2: ' + samplestr2); 
  } 
 //]]> 
 </script> 
 <input type="button" value="Test Sample" onclick="testsample(); return"> 

[ajkimoto]

Hi BlackDex,

First of all: Welcome to Webmaster World!

I found the problems, one in the regular expression, one in the function call, and one in the return statement.

So, we have:

function testsample(){
var samplestr1 = '<td rowspan = 4 width =125 valign=top class=ClassName >'
samplestr2=samplestr1.replace(/([^=]*)\s*=(\s*.*?)([.*\s>])+/gi,function(str,b,c,d){
alert('str="'+str+'"\nb="'+b+'"\nc="'+c+'"\nd="'+d+'"')
return b + '="' + c.replace(/\s/g,'') + '"'+d;
})
alert('samplestr2: ' + samplestr2);
}

I changed the regular expression from:

(/([^=]*)=(.*?)([^ >])+/gim

to:

([^=]*)\s*=(\s*.*?)([.*\s>])+/gi

I changed =(.*?) to \s*=(\s.*?) to handle blank space between the attribute and the '=' and between the '=' and the value.

I also changed [^ >] to [.*\s>] to properly get the attribute value.

The new function that is called as part of the string.replace accepts 4 parameters:

str: contains the full found string
b: contains the attribute name string
c: contains the attribute value string
d: contains the text after the attribute value (' ' or '>')

the return statement:

return b + '="' + c.replace(/\s/g,'') + '"'+d;

returns:

the attribute name
followed by an '='
followed by a '"'
followed by the attribute value with spaces removed
followed by a '"'

Hope this helps,

ajkimoto

[BlackDex]

Hello ajkimoto,

First, thanks alot for replying.
Ur the first of many other forums.

I Think you already knew what my intention whas.
And ur help has helped me alot :).
I Have changed one other thing in the RegExp at the end.
([.*\s>]) to ([.*\s>]+) becouse for example \n endings.

Now i has intergrating it into my script, and i come acrosse some weird stuff.

1. the <a href> part isn't working good.
in: <a href="http://www.link.com">link</a>
out: <a href="http://www".link.com">link</a>
2. At the end nothing gets lowercased etc.. likes it ignores it.

Here is my test code.
Thx in Advanced

<script language="javascript" type="text/javascript"> 
//<![CDATA[ 
 function cleanHTML(htmlsrc) 
 { 
 htmlsrc = htmlsrc.replace(/([^=]*)\s*=(\s*.*?)([.*\s>]+)+/gi, function(str, b, c, d) 
 { 
 //alert('str: ' + str + '\nb: ' + b + '\nc: ' + c + '\nd: ' + d); 
 c = c.replace(/\x22/g,''); 
 return b.toLowerCase() + '="' + c.replace(/\s/g,'') + '"'+d; 
 }) 
 return htmlsrc; 
 } 
 function saveHTML() 
 { 
 var htmldata = cleanHTML(document.getElementById("page").innerHTML); 
 alert(htmldata); 
 } 
//]]> 
</script> 
<div id="page" name="page"> 
<P>Pharagraph Test. Test words like: didn&#39;t or just an ".</p><br> 
 <table width="360" align="center" class="TblLestijden"> 
  <tr> 
  <td RowSpan=4 width="125" vAlign="top" class=ClassTest1> 
   <div align="left"> 
   <b>Link Test <a href="http://www.link.com">LINK</a></b> 
   </div> 
  </td> 
  <td WIDTH="55" height="22" CLASS="ClassTest2"> 
   <div align="center"> 
   <b>BOLD TEST</b> 
   </div> 
  </td> 
  <td width="55" height="22" class="ClassTest3"> 
   <div align="right"> 
   <i>Italic Test</i> 
   </div> 
  </td> 
  <td width="125" height="22" class="ClassTest4"> 
   <u>UnderLined Test</u> 
  </td> 
  </tr> 
 </table> 
</div> 
<input type="button" value="Test Sample" onclick="saveHTML(); return"> 

[ajkimoto]

Okay, I think I found the problem.

This:

htmlsrc = htmlsrc.replace(/([^=]*)\s*=(\s*.*?)([.*\s>]+)+/gi, function(str, b, c, d)

should be this:

htmlsrc = htmlsrc.replace(/([^=]*)\s*=(\s*.*?)([\s>]+)+/gi, function(str, b, c, d)

The difference is that ([.*\s>]+) becomes ([\s>]+)

I checked this revised expression and everything seems okay. Give it a try and let me know...

ajkimoto

[BlackDex]

Thx man,

This is what i have now :).
I Needed to make an different loop for the tag names.
Else it didn't make them all lowercase.

The only thing i can't figure out jet is how to make it so that <br> will get to be changed to <br />
And <img src="blah.png" alt="blah"> to <img src="blah.png" alt="blah" />
And whith that i mean the " />" part.
This to make it XHTML compilant.

Owell this is what it is now. Thx to you.

 function cleanHTML(htmlsrc) 
 { 
 //htmlsrc = htmlsrc.replace(/([^=]*)\s*=(\s*.*?)([.*\s>]+)+/gi, function(str, b, c, d) 
 htmlsrc = htmlsrc.replace(/<[^>]+>/g, function(htmlsrctag) 
 { 
  var myarray = htmlsrctag.split(" "); 
  for (var i=0; i < myarray.length; i++) 
  { 
  // replace element name 
  myarray[i] = myarray[i].replace(/<\/?.+/, function(x) 
  { 
   return x.toLowerCase(); 
  }) 
  } 
  htmlsrctag = myarray.join(" "); 
  //alert('str: ' + str + '\nx: ' + x + '\ny: ' + y + '\nz: ' + z); 
  htmlsrctag = htmlsrctag.replace(/([^=]*)\s*=(\s*.*?)([\s>]+)+/gi, function(str,b, c, d) 
  { 
  //alert('str: ' + str + '\na: ' + a + '\nb: ' + b + '\nc: ' + c + '\nd: ' + d); 
  c = c.replace(/\x22/g,''); 
  return b.toLowerCase() + '="' + c.replace(/\s/g,'') + '"'+d; 
  }) 
  return htmlsrctag; 
 }) 
 return htmlsrc; 
 } 

[BlackDex]

Hello there :),

I Have found the solution already :).
Whas very simple actualy.

   htmlsrctag = htmlsrctag.replace(/<br(.*)[\s>]/gi, "<br$1 \/>"); 
   htmlsrctag = htmlsrctag.replace(/<hr(.*)[\s>]/gi, "<hr$1 \/>"); 
   htmlsrctag = htmlsrctag.replace(/<img(.*)[\s>]/gi, "<img$1 \/>"); 
   htmlsrctag = htmlsrctag.replace(/<input(.*)[\s>]/gi, "<input$1 \/>");