a/20933290/1636522

by wared

HTML

<p><i>Click any link</i></p>

CSS

body{font-family:Arial}
li{line-height:1.5em}
i{color:#999}

JavaScript

// this part builds the HTML required for the demo

$('body').append('<ul>' + $.map([
    
    'tmi48', 'tmi4s16', 'tmi5c32', 'atti48', 
    'vzi416', 'attsgs1', 'tmbbz12', 'tmbbz3'
    // add more devices here for further testing
    
], function (cls) {
    // example : <li><a href="#" class="foo tmi48 bar>tmi48</a></li>
    return '<li><a href="#" class="foo ' + cls + ' bar">' + cls + '</a></li>';
}).join('') + '</ul>');

// this part is what you could reuse for your own project

var patterns = [
	'(i\\d[a-z]?)\\d\\d?', // iPhone
	'(sgs\\d)',            // Samsung Galaxy S
	'(bbz\\d\\d?)'         // Blackberry Z
];

var i = -1;
while (++i < patterns.length) {
	patterns[i] = new RegExp(
		'(?:^| )((?:tm|att|vz|ul)' + patterns[i] + ')(?: |$)'
	);
}

$('a').click(function (e) {
    e.preventDefault();
	var cls = $(this).attr('class'),
		i = -1, 
		m;
	while (++i < patterns.length) {
		if (m = cls.match(patterns[i])) {
            output(m[1], m[2]);
			//$('img.' + m[2]).show();
			//$('h1.' + m[1]).show();
			break;
		}
	}
});

// helper (for demo purposes)

function output(h1Class, imgClass) {
    $('p').html('h1 : <b>' + h1Class + '</b> - img : <b>' + imgClass + '</b>');
}