Vamos continuar vendo ER, esse já é o terceiro artigo meu falando sobre essa poderosa arma. Nos outros dois artigos vimos o que são ERs e para que servem e também vimos como criar validadores (exemplo que montamos foi para validar data), mas agora vamos subir um pouco de nível vamos reconhecer capturar e modificar parte de um texto.
Novamente a linguagem será C# estou atualmente utilizando o framework 4.0, neste exemplo vou criar em “Console application”, mas vou demonstrar uma técnica para ser utilizado em aplicações Web.
Quem nunca passou por algo parecido? Você está na sua mesa numa sexta-feira por volta das 5h, contando os minutos para sair terminar o expediente quando o telefone toca e é um usuário com uma voz “doce” perguntando se não tem como ele colocar links quando publicar um produto e for escrever a descrição.
Você tem duas saídas. Fala para ele pesquisar no Google sobre a tag “a” ou cria uma forma mais simples para essa entrada.
Já digo que a primeira é furada, pois se você é uma pessoa preocupada com segurança você esta escapando todas as aspas-duplas e aspas-simples e qualquer caractere que possa vir dar problemas e isso não ira permitir que ‘<a href="http://link.com.br">clique aqui</a>’ renderize de forma correta quando exibido o produto.
Agora sobrou somente uma opção. Criar uma forma de ele colocar no meio da descrição os tais links.
Então vamos pensar uma forma simples para o cliente imputar essa informação, não, já pensaram por nos, por exemplo, alguns sites de relacionamento nos permitem escrever algo do tipo [link=www.blablabla.com.br]link[/link] e será assim que vamos permitir o usuário informar os links, por dois motivos simples, primeiro que ele já deve ter utilizado isso nos sites de relacionamentos e segundo é fácil e intuitivo para ele e não vamos obrigar ele a aprender HTML.
Mãos à obra, pois vamos escrever um monte de código para fazermos esse reconhecimento. Brincadeira vai ser moleza, vamos criar uma ER mágica que vai nos ajudar em quase 90% do problema, você esta duvidando então continua lendo este artigo.
Criaremos primeiro a ER, sabemos que teremos que reconhecer no meio de um texto as ocorrências dos links que estarão todos muito parecidos com “[link=www.blablabla.com.br]link[/link]”, olhando assim bem rápido teremos partes que nunca vão mudar que são “[link=” e “[/link]” e essas partes são muito importante, pois é o começo e o final respectivamente do nosso link, o restante será as informações que o usuário esta querendo informar.
Vamos abrir nosso visualRegexp 3.0, quem não fez o download ainda pode encontrar [link=http://laurent.riesterer.free.fr/regexp/]aqui[/link] hehehehee.
Com ele aberto vamos colar essa ultima frase que eu escrevi na área do “sample” como mostra a figura abaixo.
Vamos começar por algo bem simples, onde faremos só o reconhecimento do “[link=http://laurent.riesterer.free.fr/regexp/]aqui[/link]”, vamos escrever uma ER do tipo “\[link=[\w:/\.]+\][\w ]+\[/link]” onde esperamos algo que inicia com “[link=” seguido de qualquer caractere alfanumérico ou barra ou ponto quantas vezes for necessário seguido de “]” seguido de qualquer caractere quantas vezes necessário seguido de “[/link]”, colocando essa ER no Visual Regexp na parte do pattern (padrão) e clicando em “Go” vamos ter o resultado igual à figura abaixo.
O Regexp sinaliza com cores o que casou com que, e vimos que alcançamos nosso objetivo inicial que era encontrar no texto a parte do link.
Mas vamos precisar dividir em grupos a nossa ER para conseguirmos pegar a URL e a descrição. Então vamos cercar com parênteses a parte da ER que trata da URL e a parte que trata da descrição ficando “\[link=([\w:/\.]+)\]([\w ]+)\[/link\]” vamos executar o Regexp e ver como ele vai exibir os casamentos.
Ele sinalizou em vermelho todo que a ER casou, depois em azul o primeiro grupo e em verde o segundo grupo que nos criamos.
O terceiro passo da criação da ER deve ser feito no Visual Studio por se tratar de uma particularidade do objeto REGEX do .Net e o Visual Regexp não aceita originando um erro.
Mas por hora vamos criar uma aplicação teste para essa nossa ER onde iremos verificar se houve casamento do nosso texto com o nosso padrão, iremos pegar o que casou e imprimir na tela.
using System;
using System.Text.RegularExpressions;
class Program
{
static void Main(string[] args)
{
String EntradaDoUsuario = "Vamos abrir nosso visualRegexp 3.0, quem não fez o download ainda pode encontrar [link=http://laurent.riesterer.free.fr/regexp/]aqui[/link] hehehehee.";
Regex ER = new Regex(@"\[link=([\w:/\.]+)\]([\w ]+)\[/link\]", RegexOptions.None);
if (ER.IsMatch(EntradaDoUsuario))
{
Console.WriteLine(ER.Match(EntradaDoUsuario).ToString());
}
Console.ReadKey();
}
}
Neste teste estamos utilizando a ER agrupada e o mesmo texto que estávamos utilizando no Regexp.
No começo do artigo eu disse que iríamos identificar (já fizemos), capturar e modificar, então vamos à captura.
Essa parte da ER não tem como testarmos no Regexp, mas as alterações são fáceis, só teremos que colocar no inicio de cada grupo um identificador para ele, que nos caso é colocar ‘?<identificador>’, neste caso queremos a URL e a descrição então vamos colocar no primeiro grupo ‘?<url>’ e no segundo ‘?<descricao>’ ficando assim nossa ER “\[link=(?<url>[\w:/\.]+)\](?<descricao>[\w ]+)\[/link\]”.
Vamos então alterar a ER do nosso exemplo deixando ela igual a esta e vamos imprimir na tela as partes separadas.
Regex ER = new Regex(@"\[link=(?<url>[\w:/\.]+)\](?<descricao>[\w ]+)\[/link\]", RegexOptions.None);
if (ER.IsMatch(EntradaDoUsuario))
{
Match match = ER.Match(EntradaDoUsuario);
Console.WriteLine(string.Format("Casou com:{0}", match.ToString()));
Console.WriteLine(string.Format("URL: {0}",match.Result("${url}")));
Console.WriteLine(string.Format("Descrição: {0}",match.Result("${descricao}")));
}
Feito as alterações na ER e também adicionando as linhas para exibição dos valores dos grupos teremos um código igual ao demonstrado a cima.
Para pegarmos o valor que foi encontrado nos grupos, basta colocarmos o nome do grupo dentro de “${idGrupoAqui}” no método “Result” do objeto do tipo “Match”.
Bem já conseguimos capturar as partes importantes do casamento do texto com o padrão, agora vamos trocar o que foi casado por algo que vai renderizar na tela corretamente.
Mas antes vamos juntar o que temos e imprimir a tag “a” com os valores capturados.
String Link = string.Format("<a href=\"{0}\">{1}</a>", match.Result("${url}"), match.Result("${descricao}"));
Console.WriteLine(Link);
Criamos a string “Link” com o formato correto da tag “a” com o valor do “href” e com a descrição, e agora estamos prontos para fazermos a substituição.
if (ER.IsMatch(EntradaDoUsuario))
{
Console.WriteLine("\tTexto com a entrada do usuário\n");
Console.WriteLine(EntradaDoUsuario);
Match match = ER.Match(EntradaDoUsuario);
String Link = string.Format("<a href=\"{0}\">{1}</a>", match.Result("${url}"), match.Result("${descricao}"));
EntradaDoUsuario = ER.Replace(EntradaDoUsuario, Link);
Console.WriteLine("\n\n\n\tTexto que será exibido no HTML.\n");
Console.WriteLine(EntradaDoUsuario);
}
Utilizamos o método “Replace” passando o texto da entrada do usuário e o que deve ser colocado no lugar do que foi casado.
Agora sim completamos nosso desenvolvimento para o nosso usuário que ligou na sexta-feira no final do dia.
Acontece que ele não vai querer passar um único link, pior ele vai quere passar vários, e nossa aplicação não esta preparada para isso. Vamos ver por que.
Digamos que o texto seja o seguinte: “Para ver meus artigos [link=//www.devmedia.com.br/caiohumberto]clique aqui[/link] ou [link=http://caiohumberto.techinsys.com.br/]aqui[/link]"
Temos dois links na mesma frase, se testarmos essa frase no nosso aplicativo você verá que o resultado não vai ser nada legal, pois vamos obter uma saída desta forma "Para ver meus artigos <a href=\"//www.devmedia.com.br/caiohumberto\">clique aqui</a> ou <a href=\"//www.devmedia.com.br/caiohumberto\">clique aqui</a>", o que ocorreu, o primeiro match será a primeira ocorrência (casamento) na frase e quando executamos o método “Replace” ele vai substituir todas as ocorrências com o link da primeira, e como vamos resolver isso?
Muito simples,podemos tratar de duas formas. A primeira é com a utilização do método “NextMatch” onde devemos gerencia o loop, ou tratando a coleção de “matchs” (casamentos) um a um.
Vamos tratar a coleção por ser mais simples e mais direto.
if (ER.IsMatch(EntradaDoUsuario))
{
Console.WriteLine("\tTexto com a entrada do usuário\n");
Console.WriteLine(EntradaDoUsuario);
MatchCollection Casados = ER.Matches(EntradaDoUsuario);
foreach (Match item in Casados)
{
String Link = string.Format("<a href=\"{0}\">{1}</a>", item.Result("${url}"), item.Result("${descricao}"));
EntradaDoUsuario = EntradaDoUsuario.Replace(item.ToString(), Link);
}
Console.WriteLine("\n\n\n\tTexto que será exibido no HTML.\n");
Console.WriteLine(EntradaDoUsuario);
}
Ao invés de pegarmos a primeira ocorrência de casamento pegamos todas as ocorrências em uma coleção “MatchCollection” e com um for de objetos passamos um a um fazendo a substituição do que foi casado pela nova string.
Assim abrimos uma forma do usuário criar nas suas descrições links para outros sites. Essa mesma técnica pode ser aplicada para fotos, “smile” e qualquer outra coisa que você precisar fazer o reconhecimento, a captura e a substituição.
A timeline da nossa criação da ER ficou assim:
1) \[link=[\w:/\.]+\][\w ]+\[/link\]
2) \[link=([\w:/\.]+)\]([\w ]+)\[/link\]
3) \[link=(?<url>[\w:/\.]+)\](?<descricao>[\w ]+)\[/link\]
É importante você fazer essa timeline para caso fazer uma alteração aonde venha parar de funcionar a sua ER você tenha como recuperar e até mesmo entender futuramente como você criou elas, e quais passos você executou primeiro e o que você observou primeira também.
A criação de ERs por demanda não é uma boa pratica, pois alem de confuso você pode se enganar com alguns grupos e até mesmo com o que você quer cercar deixando a sua ER fraca e falha.
Bom, chegamos ao fim deste artigo, que espero ajudar muitos Web-developers a satisfazer o usuário sem ter que fazer POG ou ensinar o usuário HTML.
Espero que tenham gostado, e não se esqueçam de fazer o download do exemplo onde está separado passo a passo o que eu demonstrei aqui.
