When you are working in jQuery with generated HTML fragments that are
returned from AJAX, It is interesting to note these cases..
Showing posts with label Regular expressions. Show all posts
Showing posts with label Regular expressions. Show all posts
for those who want or can only use JavaScript to convert regular tags list into a Tag-Cloud. jQuery and regular expressions are here to help.
Why Tag-Cloud? It is better looking and more meaningful.
Update:
Since Aug. 25, 2009: blogger now offers a built-in Tag-cloud. So you won't need this code for that job. still, jQuery manipulation is cool :)
This is a complete javascript example to detect your site visitors referrer and greeting them with a message based on their referrer url.
For example, when a dzone user clicks on your link from dzone site, they get a message to remind them to vote up your site.
If you didn't see the message already, click here to see a greeting box..
Or Try pressing 'enter' on the Browser address bar to see the no-referrer message.
Or click here to google this post title then click on my site link to get referred back here and see the googler message.
The code consists of few CSS to style the message box and uses jQuery to show up the message box and array of regular expressions to define each referrer URL pattern and the corresponded message.
<html>
<head>
<title>jQuery Fun: Greeting Your Site Referrals</title>
<style type="text/css">
/* Style your Message Div */
#WelcomePlaceHolder{
/* Keep hidden until called by javascript */
display:none;
Border:silver 2px solid;
width:240px;
height:125px;
/* some space for BG image */
padding:2px 2px 2px 100px;
background:url('http://www.01gif.com/base/les_gifs_personnage_humains/hommes/hommes002.gif') no-repeat left center;
font-size:25px;
color:#333333;
margin:5px;
}
/* Style Close Button */
A.CloseButton {
font-size:11px;
font-weight:bolder;
color:black;
border:silver 2px solid;
text-decoration:none;
float:right;
padding:2px;
}
A.CloseButton:hover {
border:gray 2px outset;
text-decoration:none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//Add urls regular expressions and your message(any HTML Code) to the array
var msgs = [
//null url : to show a message for direct traffic (no referer, some one who remember your site url!)
{'url':null, 'msg':'I am glad you remember my site URL, enjoy your stay'}
//My url! : show message for referrals from your own site or null so you do not annoy them
,{'url':/^http:\/\/(\w+\.)?moretechtips\.net/, 'msg':null}
//Other urls
,{'url':/^http:\/\/(\w+\.)?google\.com/, 'msg':'Welcome googler, Hope you will find what you looking for'}
,{'url':/^http:\/\/(\w+\.)?dzone\.com/, 'msg':'Welcome fellow dzone reader, if you like it please vote it up'}
,{'url':/^http:\/\/(\w+\.)?digg\.com/, 'msg':'Welcome digger, if you like it please digg it'}
,{'url':/^http:\/\/(\w+\.)?propeller\.com/, 'msg':'Welcome propeller user, hope you will like it here'}
//generic pattern: to show generic message for referrers that you did not specify one for
//You must keep it at the end of the list as it will match any non empty referrer
,{'url':/^http:\/\//, 'msg':'Hello their.. Hope you will find what you looking for'}
];
function DetectReferrer(){
var div = $('#WelcomePlaceHolder');
//if Div was not placed means , not to show message
if (!div.length) return;
var ref = document.referrer.toLowerCase();
var msg = findMatch(ref);
// if not null msg found
if(msg) {
//Add Close Button and Show up message
div.html( '<a href="javascript:void(0)" class="CloseButton">X</a>' + msg).show('slow',function(){
//Hide On click close Button
$('.CloseButton',div).click(function(){ div.hide() })
});
}
}
function findMatch(ref) {
for(var i=0; i<msgs.length; i++)
if( ( ref=='' && msgs[i].url==null) || (ref>'' && ref.match(msgs[i].url) ) )
return msgs[i].msg;
return null;
}
// Call the Referrer Detector function on document ready
$(DetectReferrer);
</script>
</head>
<body>
<div id="WelcomePlaceHolder"></div>
</body>
</html>Note that patterns array includes 4 type of patterns (in lowercase):
- Null Pattern, to add a message for direct traffic visitors (no-referrer)
- Your Site Pattern, to match when people referred by your site links. and i kept the message 'null' so i don't annoy the visitors.
- Generic pattern to match any referrer you didn't specify a message for, and it must come at the end of the array as it will match any non-empty referrer url.
- The rest are Sites Patterns.
for example [/^http:\/\/(\w+\.)?google\.com/] will match referrer urls that:
[^] Start with
[http:\/\/] means 'http://'
[(\w+\.)?] Any -optional- sub domain
[google\.com] match 'google.com'
Also note that, you should put the place holder div (ID='WelcomePlaceHolder') where the message should appear, and if you didn't put it there no message will come up.
If you need to review regular expressions, check this good reference [RegExp Object Reference]
it's all about Regular expressions; Regular expressions are a very powerful tool for performing pattern matches in strings. You can perform complex tasks that once required lengthy procedures with just a few lines of code using regular expressions...
in this example,i made a simple Code Beautifier and formatter for VB/VBScript/VB.net using JavaScript and CSS.
in this syntax highlighter There are patterns for matching Comments lines,Quoted strings,Escape HTML tags,and Language Keywords..
To extend this to format C# for example; all you need to change is the keywords of that programming language at the line
s = keywords_Beautifier("New|Class|..",s);
where you should place language keywords as one string separated by | as the first parameter
Go ahead try it your self
Output will look like this
Copy & paste this
You will need to include this css
<style>
b.KW {
color:blue;
}
b.Cm , b.Cm b.KW , b.Cm b.QS {
color:green;
font-weight:lighter;
}
b.QS, b.QS b.KW {
color:maroon;
font-weight:lighter;
}
</style>Code Beautifier And Formatter Source Code
<SCRIPT LANGUAGE=javascript>
function Code_Beautifier(){
var a = document.getElementById("codearea");
if (!a) return;
var s = a.value;
//escape HTML Tags <>
s= s.replace(/</g ,"<");
s= s.replace(/>/g ,">");
//next will use regular expressions patterns, and surround matches with <b ClssS="[Css class]"></b>
// but note that 'ClssS' is misspelled so it don't get changed by keywords pattern
//Beautify a quoted string
s= s.replace(/(\"[^\"]*\")/gi ,'<b ClssS="qs">$1</b>');
//Beautify Comments
s = Comments_Beautifier(s);
//escape lines
s= s.replace(/\n/g ,"<br />");
//escape spaces
s= s.replace(/\s\s/gi ," ");
//Beautify keywords
s = keywords_Beautifier("New|Class|Shared|Protected|Friend|byval|byREF|Optional|RETURN|GET|Property|Erase|LBound|UBound|Let|Set|Rem|Const|Empty|Nothing|Null|True|False|Control|Do|Loop|For|Next|For|If|Then|Else|select|While|Wend|end|Abs|Asc|AscB|AscW|Chr|ChrB|ChrW|CBool|CByte|CDate|CDbl|Cint|CLng|CSng|CStr|DateSerial|DateValue|Hex|Oct|Fix|Int|Sgn|TimeSerial|TimeValue|date|Time|DateSerial|DateValue|Day|Month|Weekday|Year|Hour|Minute|Second|Now|TimeSerial|TimeValue|Dim|Private|Public|ReDim|Sub|On|Err|InputBox|MsgBox|Atn|Cos|Sin|Tan|Exp|Log|Sqr|Randomize|Rnd|Mod|Is|And|Or|Xor|Eqv|Imp|CreateObject|IsObject|option|Call|FUNCTION|Sub|Instr|InStrB|Len|LenB|Lcase|Ucase|Left|LeftB|Mid|MidB|Right|RightB|Space|StrComp|string|Ltrim|Rtrim|Trim|IsArray|IsDate|IsEmpty|IsNull|IsNumeric|IsObject|VarType|ERROR",s);
s = CorrectCssClass(s);
var o = document.getElementById("output") ;
if (o) o.innerHTML = s;
var oa = document.getElementById("outarea");
if (oa) oa.value=s;
}
function keywords_Beautifier(keys,s) {
var rx = new RegExp("(\\b)("+ keys +")(\\b)", "gi")
return s.replace(rx ,'$1<b ClssS="Kw">$2</b>$3');
}
function Comments_Beautifier(s) {
return s.replace(/\'([^\n]+)\n/gi ,'<b ClssS="Cm">\'$1</b>\n');
}
function CorrectCssClass(s) {
return s.replace(/ClssS/g ,'class');
}
</SCRIPT> Some fine JavaScript Regular Expressions References
Using Regular Expressions with JavaScript and ActionScript
javascript regual expressions
JavaScript RegExp Object Reference
Subscribe to:
Posts (Atom)
Web developer, jQuery plugin author, social media fan and Technology Blogger.