0

estoy haciendo un ejercicio de modificación y formatear strings, para este ejercicio he tomado de ejemplo una red social y los datos a mostrar serán de publicaciones.

Explicaré todo a detalle aun que doy por hecho que muchos de vosotros no necesitais saber casi nada de informacion para entender lo que intento, pero me gustaría que otras personas que puedan llegar a leer esto que no tengan tanto conocimiento, lo entiendan y puedan aprender algo.

La explicación del ejercicio es la siguiente, tengo tres archivos en los que tengo que trabajar, dos con lenguaje TypeScript y otro HTML. En el primer archivo hago la consulta a firebase y me devuelve lo siguiente:

Datos de la consulta

posts = [
    {
      userName: "User123456",
      userImg: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8cG9ydHJhaXR8ZW58MHx8MHx8&w=1000&q=80",
      postType: "media",
      postDesc: "Lorem ipsum dolor sit amet consectetur adipiscing elit accumsan id nam. @Test",
      postMediaSrc: "https://my.w3wallpapers.net/modroada/Aesthetic-Wallpaper.jpg",
      postDate: new Date('2019-02-14 06:00:18'),

     },

Mostrar datos

En este archivo tengo un ngFor para mostrar todos los post que existan. Este es un fragmento del código que es dónde está el foco de este ejercicio.

<div class="post-media-container">
  <div class="post-media-desc">
    <p class="media-desc" id="media-desc">
      {{ post.postDesc | formatDesc }} 
    </p>
  </div>
</div>

En este archivo .html utilizo {{ post.postDesc | formatDesc }} para mostrar la descripción correspondiente al la publicación y formatDesc para que la string de la descripción pase por el archivo que le dará el formato que quiero.

Dar formato

En este último archivo .ts recibirá en forma de string la descripcion de la publicacion y como final despues de darle el formato habrá un return del texto con el formato.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'formatDesc',
})

export class FormatDescPipe implements PipeTransform {
  transform(text: any) {

    if (text.includes('@')) {

    }

    return text;

  }
}

Problema

Necesito que la string que recibe el último archivo, detecte si hay un @ o varias, en caso de que si, quiero que se incluya dentro de una etiqueta <a> únicamente el texto que tenga el arroba delante.

Soluciones probadas sin éxito

La idea de esta solución es primero de todo comprobar si el texto recibido incluye un @ en cualquier linea, en caso de que no, retornar el texto, en caso de que si, hago un split del texto de cada palabra separada por un espacio, luego utilizo un for con el tamaño del texto separado y compruebo uno por uno cual es el que contiene el @. Una vez lo encuentra, crea un elemento a y le cambia la propiedad innerHTML con el texto que contiene el @. Por ultimo convierto la etiqueta a en hijo del div.

 
    var parent = document.querySelector('#media-desc')
    if (text.includes('@')) {
      let splitted = text.split(' ')
      for (let i = 0; i < splitted.length; i++){
        if(splitted[i].includes('@')) {
          let mention = document.createElement('a')
          mention.appendChild(document.createTextNode(splitted[i]))
          parent.appendChild(mention)
        }
      }
      return mention
    }
 return text;

No se hasta que punto tiene sentido, no se si voy bien encaminado pero si alguien sabe como puedo hacerlo lo agradezco.

2 respuestas 2

1

Solución

Siguiendo la lógica de @alberto-siurob únicamente hay que modificar la función formatAtts cambiando const atts = element.postDesc.split('@'); por const atts = element.postDesc.split(' '); después cambiaremos lo siguiente de la variable formatted para que quede tal que asi :

var formatted = atts.map(att => {
  if (att.includes('@')) {
    return `<a href="/tabs/profile/${att.split('@')}">${att}</a>`
  } else {
    return att
  }
});

Explicación: Es bastante sencillo de comprender, la variable formatted alamcena todos los atributos mapeados, para ello hacemos un map que comprobará cada palabra por separado si incluye un @, en caso de que no, no return att para retornar la palabra sin modificar, en caso de que si, retornamos el texto modificado return '<a href="/tabs/profile/${att.split('@')}">${att}</a>' y listo!

1
  • Excelente que hayas creado tu solución basado en lo que yo te dejé, eso habla de tu profesionalismo como desarrollador. el 31 ene. 2022 a las 3:57
0

Veo complicado que puedas hacerlo por medio de un pipe. Te podría sugerir otra solución basada en tu archivo .ts

Primero necesitamos importar el sanitizador de HTML, ya que armaremos esas etiquetas con strings.

import { DomSanitizer } from '@angular/platform-browser';

Luego inyectamos esa función en el constructor para poder usarla, también puse un servicio que debería servir la información de tu endpoint. También hice una pequeña interfaz para que no te pierdas

interface IPost {
    userName: string;
    userImg: string;
    postType: string;
    postDesc: string;
    postMediaSrc: string;
    postDate: Date;
    mentions?: string;
}

constructor(
    private sanitizer: DomSanitizer,
    private yourService: YourService
) {}

En el hook de OnInit llamé al servicio para traerme los posts, vamos a pasarlo por un creador de etiquetas

ngOnInit(): void {
    this.yourService.getPosts().subscribe( (posts: IPost[]) => {
        this.posts.map( post => this.formatAtts( post ) );
        this.posts = posts;
    }
}

Este creador de etiquetas tiene la finalidad de detectar los arrobas y crear las etiquetas <a> de tantas menciones existan. Debido a que Angular por seguridad no te permite inyectar código creado por string, debemos pasarlo por el sanitizador y agregarlo a un nuevo nodo que yo llame mentions, si no existen los arrobas, entonces regresará la descripción del elemento sin modificaciones.

formatAtts( element: IPost ): void {
    if ( element.postDesc.includes( '@' ) ) {
        const atts = element.postDesc.split( '@' );
        const formatted = atts.map( att => `<a>${ att }</a>` );
        element.mentions = this.sanitizer.bypassSecurityTrustHtml(formatted.join( '<br>' ));
    } else {
    element.mentions = element.postDesc;
}
}

Ya teniendo eso ahora si lo pasamos al HTML, ya no deberás pasarlo por un pipe, si no que lo inyectas directo en el html

<ng-container *ngFor="let post of posts">
<div class="post-media-container">
  <div class="post-media-desc">
    <div class="media-desc" [innerHtml]="post.mentions"></div>
  </div>
</div>
</ng-container>

Te comparto la teoría básica del DomSanitizer

2
  • Fascinante, lo podré en práctica en breves !!
    – Noooma
    el 30 ene. 2022 a las 17:41
  • Resultado: Lo he puesto en practica, el resultado es acertado en cierta parte; Encierra perfectamente el texto en una etiqueta a, el único problema es que encierra todo el texto y el @ lo elimina. Habria que poner el texto en una etiqueta p y dentro de ese parágrafo otra etiqueta a que encierre el texto que tiene el @. Ejemplo: Lorem ipsum dolor sit amet. @Test se traduciria a <p>Lorem ipsum dolor sit amet. <a> @Test </a> </p>
    – Noooma
    el 30 ene. 2022 a las 18:48

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.