Um filtro AngularJS (escrito em CoffeeScript) para localizar um url em uma string e substituí-lo por uma tag âncora.
fundo
Um projeto de cliente atual no qual estou trabalhando permite que usuários administrativos insiram dicas dinâmicas para serem exibidas aos usuários. Essas dicas podem conter links, no entanto, são apenas texto simples no banco de dados. O cliente deseja que essas dicas sejam vinculáveis. Uma abordagem seria atualizar as strings no banco de dados (migração) para conter as tags âncora. Embora essa abordagem funcione para dicas atuais, não é desejável porque forçaria os administradores a usar html ao criar novas dicas no futuro. Filtros AngularJS para o resgate.
O filtro
O filtro define um URL Regex. Se uma string de entrada válida for fornecida, a função de substituição de JavaScript será chamada nela. Usando a opção de argumento de função para a chamada de substituição e argumentos JavaScript, podemos criar uma tag âncora válida e atualizar a string de entrada.
angular.module('myApp')
.filter 'linkify', () ->
(input) ->
if input
urlRegex = /(^|s)((https?://)?[w-]+(.[w-]+)+.?(:d+)?(/S*)?)/gi
input.replace urlRegex, ->
uri = arguments[2]
uri = "http://#{uri}" if arguments[3] is undefined
" <a href="#{uri}"" target=""_blank"">#{arguments[0]}</a>""Uso
O filtro pode ser aplicado a partir de visualizações html e código JS via sistema de filtro AngularJS
Visualizações
<div ng-repeat=""tip in tips"">
<p ng-bind-html=""tip | linkify""></p>
</div>JS
linkifyFilter = $filter('linkify');
// single string
linkifiedString = linkifyFilter(stringToLinkify);
// array of strings
filteredStrings = stringsToFilter.map(function (stf) {
return linkifyFilter(stf);
});“