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.