Bootstrap

This week Myself and Haishi are joined by Pranav Rastogi to talk about Bootstrap. Bootstrap is a mobile first front-end framework for building web sites and web applications. Bootstrap has been adopted into the new ASP.NET templates which will ship with Visual Studio 2013. Get a guided explanation through many of the exciting CSS and Javascript features in Bootstrap which will help you speed up the design of your latest ASP.NET Website.

Quick Text replace jQuery

Ever find yourself needing to target specific text inside of an element and wrap it so that you can change it? Well here is a quick jQuery regex snippet to help you with just that.


var text = 'I want text';

$( 'TAG YOU WANNA GRAB' ).html( function ( i, html ) {
    var regexp, replacement;

    regexp = RegExp( '(' + text + ')', 'gi' );
    replacement = '<span class="highlight">$1</span>';

    return html.replace( regexp, replacement );
});

So how does this work?

Well first off we create a variable called “text”. That variable contains the text that we are looking for. In this example it is “I want text’. So perhaps in your code you have this


<p>I want text to show off to all of my friends<p>

Next we pull the Javascript RegExp object to look for a matched set of data. In this case it is defined in our variable “text”. We add the ‘gi’ to search ‘g’to find all the matches(‘not just stopping after the first match) and ‘i’ to be case-insensitive.
We then define our replacement variable to equal the span tag and keep the $i (placeholder) text. (in this case it is the text we were looking for.
Then it just a matter of returning the .html values we need.

And here is your result


<p><span class="highlight">I want text<span> to show off to all of my friends<p>

Easy.

Two more Screencasts coming.

I am in the process of making two more screencasts to go along with the other two latest involving Custom Post Types UI and Advanced Custom Fields. These to videos will cover the use of some Add-Ons that can be purchased for ACF. The Repeater Field and The Flexible Content Field. Those should be out over the next couple of days.