Strings e Expressões Regulares

Boa noite galera, agreço as visitas e os comentários, continuem sempre assim ;).

Como mensionado antes, hoje vou falar sobre Strings e Expressões Regulares, bom, eu não pretendo me fixar no assunto de expressões regulares, eu apenas mostrarei como usa-las no JavaScript, pra quem quizer estudar expressões regulares, acesse esse site: http://guia-er.sourceforge.net/ esse é melhor site sobre expressões regulares que eu conheco, quem quizer estude por ele, pois é muito bom.

Voltando ao nosso assunto, hoje aprenderemos a manusear Strings usando JavaScript, vamos ver inicialmente a criação de strings:

var a = "primeira string";
var b = new String("de outro modo");

alert(a);
alert(b);

Isso é bem simples, como vocês devem saber, strings devem ficar dentro aspas, no JavaScript você pode tanto usar aspas simples como duplas, isso não vai interferir em nada.

Comparação de Strings
Temos que ter uma atenção nessa parte, a comparação de strings pode ser feita usando o operador ==, mas fazer a comparação dessa forma deixa um risco, porque o operador == vai comparar a referência dos objetos, vamos ver em exemplos isso:

var a = "teste";
var b = "teste";

if(a == b)
alert('a e b sao iguais');
else
alert('a e b sao diferentes');

var c = new String("teste");
var d = new String("teste");

if(c == d)
alert('c e d sao iguais');
else
alert('c e d sao diferentes');

Como podem ver, oque acontece é que quanto definimos a e b daquela forma, ele acaba usando strings cacheadas (guardas no mesmo ponto de memória para melhorar o desempenho), ja usando new String com c e d ele força uma nova alocação, assim as refencias ficam diferetes, e acaba que na comparação ele considara as strings diferentes (mesmo o texto sendo exatamente igual). Para resolver isso, fazemos uma coisa meio bizarra, prefiro explicar com codigos:

var a = "teste";
var b = "teste";

if(a == b)
alert('a e b sao iguais');
else
alert('a e b sao diferentes');

var c = new String("teste");
var d = new String("teste");

if(c.toString() == d.toString())
alert('c e d sao iguais');
else
alert('c e d sao diferentes');

Pronto, agora nossa comparação de c com d retornou verdadeira.

Operador de concatenação e caracteres de escape

Para concatenar strings não tem segredo, basta usar o operador de soma:

var a = 'oi';
var b = 'visitante';

alert(a + ' ' + b);

Mas um porém é quando queremos concatenar números, como se fossem strings, para isso temos que concatenar o número a uma string, vamos ver como concatenas dois números:

var a = 5;
var b = 9;

alert(a + '' + b);

Usando uma string, mesmo que seja vazia, ao somar com um número ele transforma aquele número em uma string, assim temos a concatenção e não a soma dos números.

Caracteres de escape são caracteres que existem mas não são vistos exatamente, como por exemplo o enter, para as pessoas o enter é um separador de linha, para o computador é apenas mais um caractere, para escrever uma linha do windows (que usa 2 caracateres) escreveriamos "\r\n" que para o JavaScript o \r eh transformado em um caractere, e o \n em outro, isso forma uma linha no windows, em muitos casos podemos usar apenas o \n, pois ele ja resolver, vamos ver a tabela dos caracteres escapados no JavaScript:

Caractere	Resultado
\n	nova linha
\r	retorno de carro
\t	tabulação
\\	insere uma barra

Existem mais, mas esses são os mais usados. Como as strings sao representadas dentro de aspas, as vezes precisamos usar essas aspas dentro da string, para isso usamos o escape \" ou \' dependendo do seu caso, vamos ver um exemplo:

alert("texto em \"aspas\"");
alert('texto em \'aspas\'');

Métodos de String

As Strings do JavaScript não tem tantos métodos quanto precisamos hoje em dia, ela tem os mais básicos, por isso muitas pessoas fazem uma implementação de extensão para as strings (usando seu prototype e adicionando mais recursos), em artigos futuros faremos uma implementação desse gênero, adicionando vários recursos. Mas o JavaScript tem seus recursos, então vamos conhece-los:

Quando precisamos pegar um caractere expecífico em uma string, usamos o método charAt:

var a = "abcde";

alert(a.charAt(1));
alert(a.charAt(4));

Lembre-se sempre que a indexção começa em zero, entao o primeiro caractere é o zero, o segundo é um e por ai vai.

Muito parecido com o charAt temos o charCodeAt que funciona da mesma maneira, mas no lugar de retornar o caractere, ele retorna um número inteiro, que no caso é o codigo ASCII do caractere (quem quizer, acesse http://www.asciitable.com/ para ver a tabela completa).

Um método que vai um pouco além do charAt é o método substring, esse método pega um bloco da string:

var a = "abcde";

alert(a.substring(0, 2));
alert(a.substring(1, 4));

O primeiro argumento é a posição inicial, o segundo a posição final.

Quando precisamos procurar uma string dentro da outra, usamos o método indexOf, esse método aceita uma string como argumento, e procura essa string dentro da string original, se encontrado retorna a posição onde foi encontrado, caso contrário retorna -1.

var a = "abcde";

alert(a.indexOf("b"));
alert(a.indexOf("e"));
alert(a.indexOf("cd"));
alert(a.indexOf("z"));

Também é possivel passar um segundo argumento, que indica a posição inicial da busca (sinta-se livre para testar). Inverso ao indexOf que busca a partir do início da string, existe o método lastIndexOf que procura do início para o começo da string.

Esse não é o melhor método para buscar algo dentro de uma string, o melhor é usar expressões regulares (veremos isso mais adiante), mas para casos mais simples, o indexOf resolve muitas coisas.

O último método que veremos, é o método split, esse método "quebra" uma string em um array, usando uma string para realizar essa quebra (fazendo a separação):

var a = "isso seria uma simples frase";
var b = a.split(' '); //separando por espacos

for(var i = 0; i < b.length; i++) {
alert(b[i]);
}

Esses foram os métodos principais para tratamento de string no JavaScript, não menos importante, temos a propriedade length (isso, mesmo nome que tem no Array), o length retorna a quantidade de caracteres que existem na string.

var a = "abc";
var b = "abcde";
var c = "uma string cheia de caracteres";

alert(a.length);
alert(b.length);
alert(c.length);

Expressões Regulares

As expressões regulares são a parte mais interessante da área de strings (pelo menos pra mim). Com expressões regulares você consegue facilmente validar strings, coisas que precisariam de um grande código se fossem feitas de outra maneira (como usando substrings e indexOf).

O JavaScript tem um objeto chamado RegExp que cuida dessa parte, existe o meio onde você cria um RegExp e valida uma string a partir dele, ou você pode usar um método da string (que é o match) para usar um RegExp para validar, no final tudo gera o mesmo resultado. Vamos ver como validar uma data usando RegExp (vamos ver usando os 2 processos que eu disse):

var dataValidator = new RegExp("^\\d{2}/\\d{2}/\\d{4}$");

if(dataValidator.test('15/06/2006'))
alert('Data válida');
else
alert('Data inválida');

if(dataValidator.test('158/06/2006'))
alert('Data válida');
else
alert('Data inválida');

if('15/06/2006'.match(dataValidator))
alert('Data válida');
else
alert('Data inválida');

if('158/06/2006'.match(dataValidator))
alert('Data válida');
else
alert('Data inválida');

Esse validador diz que a string deve ter 2 digitos numericos (\d{2}), depois uma barra, mais dois digitos numericos, depois outra barra, e finalmente 4 digitos numericos. Também informamos que a string deve ser exatamente isso (usando o ^ no início e $ no final), o digito ^ diz que a string deve comecar daquele jeito, e o $ diz que a string deve acabar daquele jeito. Como eu disse antes, não vou parar para explicar as expressões regulares pois isso está fora do meu contexto.

Além de validar, as vezes queremos pegar alguns pedaços da string, por exemplo, se a partir dessa string de mes, quizesse-mos pegar apenas o mês (que seriam os 2 dígitos do meio), com expressões regulares isso se torna facil, vamos ver isso no exemplo a seguir, e também vamos ver outro meio de iniciar expressões regulares:

var dataValidator = /^\d{2}\/(\d{2})\/\d{4}$/;
var data = '15/12/2005';
var grupos;

if(grupos = data.match(dataValidator)) {
alert('Mes: ' + grupos[1]);
}

Percebam o novo modo de criação, você só precisa colocar uma / e depois outra para finalizar, a expressão fica dentro das barras, quando é preciso inserir / dentro da expressão usamas \/ assim estamos "escapando" a barra. Outra observação é que colocamos a parte da expressão que pega o mês entre parênteses, assim podemos recupera-la depois. Além de validar, o método match retorna um array com os grupos que foram marcados dentro da expressão, o índice zero contém a string inteira, e a partir do um tem os grupos marcados (na mesma ordem em que foram marcados na string).

Também podemos fazer substituições usando expressões regulares, por exemplo:

var string = 'mariazinha, joaninha, pedrinho';
var novaString = string.replace(/(zinh(a|o)|inh)/g, '');

alert(novaString);

No caso substituimos as ocorrências expressão por nada :P. Notem agora o uso de uma letra "g" no final da expressão, essa letra "g" indica que mesmo após uma ocorrencia, ele deve continuar buscando a expressão na string, se você remover essa letra ele só vai substituir o nome de mariazinha. Fora a letra g temos a letra i que torna a expressão case-insensitive (não diferencia maiúsculas de minúsculas) e a letra m que faz buscas multi-linha.

Por hoje é só pessoal, espero ter conseguido passar o básico de strings e uso de expressões regulares em JavaScript, estudem expressões regulares pelo site que eu passei no início do artigo, vocês vão ver coisas realmente interessantes, estudem la e vão testando a aplicação das mesmas com o JavaScript, assim vocês pegam um "2 em 1" ;)

Antes de ir, sempre aquela boa referência:

Classe String

String (Built-in Object)
String is the container object for the primitive string data type. It supplies methods for the manipulation of strings in addition to those that create traditional HTML markup from plain text. When manipulating strings, remember that like all JavaScript indices, the enumeration of character positions begins with zero.

Constructor
var instanceName = new String(initialValue);

where initialValue is a string. Omitting initialValue creates a String where value is the empty string ("").

Properties
length Integer indicating the number of characters in the string. (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

prototype Reference to the object’s prototype. (IE4+ (JScript 2.0+), MOZ, N3+ (JavaScript 1.1+), ECMA Edition 1)

Methods
anchor(name) Returns the string marked up as an HTML anchor (<a name="name">

string value</a>). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1).

big() Returns the string marked up as big HTML text (<big>string value</big>). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+))

blink() Returns the string marked up as blinking HTML text (<blink>string value</blink>). (IE3+ (JScript 1.0+), N2+ (JavaScript 1.0+), MOZ)

bold() Returns the string marked up as bold HTML text (<bold>string value</bold>). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+))

charAt(position) Returns a string containing the character at index position in the string. The empty string is returned if position is out of range. (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

charCodeAt(position) Returns an unsigned integer representing the Unicode value of the character at index position. If position is out of range, NaN is returned. (IE5.5+ (JScript 5.5+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 1)

concat(string2 [, string3 [, ... ]]) Returns the string obtained by concatenating the current string value with string2, string3, .... (IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 1)

fixed() Returns the string marked up as fixed-width HTML text (<tt>string value</tt>). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+))

fontcolor(theColor) Returns the string marked up as colored HTML according to the string color (<font color="theColor">string value</font>). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+))

fontsize(theSize) Returns the string marked up according to the HTML font size given in theSize (<font size="theSize">string value</font>). HTML font sizes are 1 through 7, or relative +/– 1–6. (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+))

fromCharCode(char0 [, char1 [, ...]]) Creates a string from the given characters. The arguments char0, char1, ... are Unicode numbers corresponding to the desired characters. (IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 1, Static)

indexOf(searchString [, startIndex]) Returns the index of the first occurrence of searchString in the string. If startIndex is specified, then the first occurrence after index startIndex is returned. If searchString is not found, –1 is returned. (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

italics() Returns the string marked up as italicized HTML text (<i>string value</i>). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+))

lastIndexOf(searchString [, startIndex]) Returns the index of the last occurrence of searchString in the string. If startIndex is specified, the index of the last occurrence starting at index startIndex or before is returned. If searchString is not found, –1 is returned. (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

link(theHref) Returns the string marked up as an HTML link to the string theHref (<a href="theHref">string value</a>). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+))

match(regexp) Executes a regular expression match with the regular expression regexp and returns an array of results. If no match is found, null is returned. Otherwise, the returned array is exactly like that returned by RegExp.exec(). (IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 3)

replace(regexp, replacement) Returns the string obtained by executing a match with the regular expression regexp on the string and then replacing each piece of matching text with the string replacement. In IE5.5 and N4.06+ replacement can be a function (see full description at MSDN). (IE3+ (JScript 1.0+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 3)

search(regexp) Executes a regular expression match with regular expression regexp and returns the index of the beginning of the matching text in the string. If no match is found, –1 is returned. (IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 3)

slice(start [, end]) Returns a new string containing the substring from index start up to but not including index end. If end is omitted, the substring returned runs to the end of the string. If start or end is negative, it is treated as an offset from the end of the string. (IE4+ (JScript 3.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 3)

small() Returns the string marked up as small HTML text (<small>string value</small>). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+))

split([separator [, limit]]) Returns the array of strings obtained by splitting the string at each occurrence of separator (which may be a string or regular expression). The separator is not included in the array returned. If no separator is given, the string is split into an array of strings holding its individual characters. If the integer limit is given, only the first limit parts are placed in the array. (IE4+ (JScript 3.0+), MOZ, N3+ (JavaScript 1.1+), ECMA Edition 1)

strike() Returns the string marked up as struck-through HTML text (<strike>string value</strike>). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+))

sub() Returns the string marked up as subscript HTML text (<sub>string value</sub>). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+))

substr(start [, length]) Returns a new string containing a substring of length length beginning at index start. If length is not given, the substring returned runs to the end of the string. (IE4+ (JScript 3.0+), MOZ, N2+ (JavaScript 1.0+))

substring(start [, end]) Returns a new string containing the substring running from index start up to but not including index end. If end is not given, the substring runs to the end of the string. If start is greater than end, the values are swapped. (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

sup() Returns the string marked up as superscript HTML text (<sup>string value</sup>). (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+))

toLowerCase() Returns the string converted to all lowercase. (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

toUpperCase() Returns the string converted to all uppercase. (IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMA Edition 1)

Support
Supported in IE3+ (JScript 1.0+), MOZ, N2+ (JavaScript 1.0+), ECMAScript Edition 1.

Notes
This object does not operate on values in place. That is, when manipulating a String with one of its methods, the method returns the result of the operation. It does not change the value of the String that it was invoked as a method of. You can, of course, use self-assignment to this effect—for example,

var mystring = mystring.toUpperCase()

The String methods do not produce XHTML style markup.

Classe RegExp

RegExp (Built-in Object)
Instances of RegExp objects hold regular expression patterns and provide the properties and methods that enable their use on strings. In addition, each window has a RegExp object that provides static (class) properties giving information about the most recent match that was executed. These properties are dynamically scoped.

Constructor
var instanceName = new RegExp(expr [, flags]);

where expr is a string containing a regular expression (for example, "abc.*") and flags is an optional string denoting the flags for the expression (for example, "gi").

Properties
$1, $2, ... $9 The $n property contains the string corresponding to the nth parenthesized subexpression of the most recently executed match. The properties are read-only. (IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2+))

global A read-only Boolean indicating whether the global flag ("g") was used to create the regular expression. (IE5.5+ (JScript 5.5+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 3)

ignoreCase A read-only Boolean indicating whether the case-insensitive flag ("i") was used to create the regular expression. (IE5.5+ (JScript 5.5+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 3)

index A read-only integer value indicating the character position where the first successful match begins (during the most recently executed match). (IE4+ (JScript 3.0+))

input Holds the string upon which the most recent regular expression match was conducted. This property is not automatically filled in N6. (IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2+))

lastIndex Integer specifying the character index of the string at which the next match will begin. Used during global matching. (IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 3)

lastMatch A read-only string containing the last matched characters of the most recent match. (IE5.5+ (JScript 5.5+), MOZ, N4+ (JavaScript 1.2+))

lastParen A read-only string containing the last matched parenthesized subexpression (of the most recent match). (IE5.5+ (JScript 5.5+), MOZ, N4+ (JavaScript 1.2))

leftContext A read-only substring up to but not including the beginning of the most recently matched text (of the most recently executed match). (IE5.5+ (JScript 5.5+), MOZ, N4+ (JavaScript 1.2))

multiline A read-only Boolean indicating whether the multiline flag ("m") was used to create the regular expression. (IE5.5+ (JScript 5.5+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 3)

prototype Reference to the object’s prototype. (IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 3)

rightContext A read-only substring following (but not including) the most recently matched text. (IE5.5+ (JScript 5.5+), MOZ, N4+ (JavaScript 1.2), ECMA Edition 3)

source A read-only string containing the text that makes up the pattern (excluding any slashes used to define it and the flags). (IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2), ECMA Edition 3)

Methods
compile(expr [, flags]) Compiles the regular expression expr with flags flags in the object. Used to replace an expression with a new one. (IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2), ECMA Edition 3)

exec(str) Executes a match against the string str and returns an array containing the results. If no match was made, null is returned. If str is omitted, the contents of RegExp.input is used as str. The resulting array has the entire match in element zero, and any matched subexpressions at subsequent indices. It also has instance properties input (which holds the string on which the match was executed), index (which holds the index of the beginning of the match in the input string), and in IE lastIndex (which holds the index of the first character following the match). (IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2), ECMA Edition 3)

test(str) Returns a Boolean indicating whether the regular expression matches a part of the string str. (IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2), ECMA Edition 3)

toString() Returns the string corresponding to the regular expression, including enclosing slashes and any flags that were used to define it. (IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2), ECMA Edition 3)

Support
Supported in IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2+), ECMAScript Edition 3.

Vou indo, no próximo artigo eu falarei sobre outros objetos Built-In, depois dele já começaremos a parte legal do JavaScript, me suportem até lá, vai valer a pena ;)