jesh Posted December 22, 2006 Share Posted December 22, 2006 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 More sharing options...
jesh Posted December 22, 2006 Author Share Posted December 22, 2006 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now