Jump to content

Help with Regular Expressions


Recommended Posts

I've begun playing around with building a code display/syntax highlighter control, similar to the idea of what is here in the forums when you use a SQL box to display SQL:

SELECT * FROM mytable

I've made the one for javascript and it works beautifully. I've now moved on to the XHTML highlighter and I'm running into the problem of highlighting tags that have multiple attributes. I've got it looking something this:

case "html":	// get start tags	var starttagreg = /<(\w+)(.*?)>/g	html = html.replace(starttagreg, "<[tag]$1[/tag]$2>");	// and end tags	var endtagreg = /<\/(\w+)>/g;	html = html.replace(endtagreg, "</[tag]$1[/tag]>");	// now to style the attributes	var attrreg = /\[\/tag\]\s(\w+)="(.*?)"/g	html = html.replace(attrreg, "[/tag] <span class=\"attribute\">$1</span>=\"<span class=\"value\">$2</span>\"");	// and to style the tag names	var keywordreg = /\[tag\](\w+)\[\/tag\]/g;	html = html.replace(keywordreg, "<span class=\"tag\">$1</span>");	break;

Anyone have any suggestions on how to loop through (either with a for loop or using RegExp) all the attributes in an HTML tag so I can wrap it in a span for styling? Also, anyone know why my / is disappearing in the img tag?Thanks!EDIT: Hmm, nevermind about the missing "/" in the tag, I sorted that out. Still need help on the other thing though :)

Link to comment
Share on other sites

Hmm, I seem to have solved it using nested while loops (uggh).If you're interested, here is the appropriate snippet:

// I had already had code that replaced all of the attributes// within a [attr][/attr] block so a typical tag would look like:// <img[attr]src="circle.gif" alt="" width="5" height="5"[/attr] />var attrgroup = /\[attr\].*?\[\/attr\]/;var attrpair = /(\w+)="(.*?)"(.*)/;var groupmatch, pairmatch, temp;while(groupmatch = html.match(attrgroup)){	temp = groupmatch[0];	temp = temp.replace(/\[\/?attr\]/g, "");	while(pairmatch = temp.match(attrpair))	{		temp = temp.replace(attrpair, " [name]$1[/name]=\"[value]$2[/value]\"$3");	}	html = html.replace(attrgroup, temp);}			html = html.replace(/\[name\]/g, "<span class=\"attrname\">");html = html.replace(/\[value\]/g, "<span class=\"attrvalue\">");html = html.replace(/\[\/(name|value)\]/g, "</span>");

If you know of a better way, please let me know. :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...