5

Tengo un input en el cual el usuario puede poner lo que quiera, y cuando haga intro, el texto introducido se mostrará en una sección como texto plano.

Ejemplo de texto introducido por el usuario:

 Hola mundo, visita <a href="google.es">Google</a>

El resultado será exactamente ese texto.

Pero necesito que si el usuario introduce un carácter especial, se transforme en un link.

Por ejemplo, si el usuario introduce:

Hola mundo, visita [google.es|Google]

El resultado esperado es:

Hola mundo, visita Google 

Donde Google es un link.

2
  • 2
    consejo: busca sobre filtros Markdown para angular Commented el 21 dic. 2015 a las 15:41
  • mirate este Fiddle de ejemplo, no es el formato [google.es|Google] pero tienes muchas más opciones que links y usaras el standard markdown Commented el 21 dic. 2015 a las 15:43

1 respuesta 1

4

Aquí te dejo una implementación muy simple de lo que quieres.

Funciona utilizando un filtro de angularJs, el filtro parsea manualmente la entrada y produce la salida que tu quieres. Esta version puede contener multiples links, pero requiere que se incluya el modulo ngSanitize.

angular.module('app', ['ngSanitize'])
.filter('minimarkdown', function() {
  return function(input) {
    input = input || "";
    var matches = input.match(/\[(.*?)\]/gi);
    if (matches && matches.length) {
      for(var i = 0; i < matches.length; i++) {
        var match = matches[i];
        match = match.substring(1);
        match = match.substring(0, match.length -1).split('|');
        var anchor = '<a href="' + match[0] + '">' + match [1] + '</a>';
        input = input.replace(matches[i], anchor);      
      }
    }
    return input;
  };
})
.controller('ctrl', ['$scope', function($scope) {
   $scope.valor = 'Hola mundo, visita [http://google.es|Google]';
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.23/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.23/angular-sanitize.js"></script>
<div ng-app="app" ng-controller="ctrl">
<input type="text" ng-model="valor" size="50"/>
<pre>
Salida Cruda: {{ valor | minimarkdown }}
</pre>
Salida Con link:
<span ng-bind-html='valor | minimarkdown'></span>
</div>

4
  • 2
    fijate que en los links deberias utilizar URL absolutas, sino va a ir a la direccion relativa dentro de stack snippets. Commented el 21 dic. 2015 a las 16:35
  • Primero gracias por el código. El problema es que si el usuario pone el link con <a href> traga, y yo quiero que no trague en ese caso. Igual no es posible hacer lo que quiero sin meter un replace... El objetivo real es que un usuario no pueda meter iframes ni scripts, por seguridad.
    – user1964
    Commented el 21 dic. 2015 a las 19:43
  • 1
    @Dabbbb. ¿que quieres decir con "traga"?.. por otro lado, el modulo ngSanitize que utiliza ng-bind-html, evita que se pueda utilizar código potencialmente peligroso. Es la razón de ser de dicho modulo. Commented el 21 dic. 2015 a las 20:30
  • Quiero decir que si el usuario introduce un tag de html, cuando se muestre el mensaje, "ejecutará" ese tag. Mi objetivo era que en este caso se mostrara el texto tal cual, y en caso de que el usuario utilizara la regla del filtro entonces si aparecería el link. Igualmente con el filtro que me has puesto y con el Sanitize creo que ya me puedo apañar.
    – user1964
    Commented el 22 dic. 2015 a las 8:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.