Necesito ayuda con una lógica de algoritmo.
<p>hello :love: my name is :mad: john, I am from :world: Germany.</p>Hay una cadena de tipo . Lo que quiero es obtener un resultado como este:
<p>hello <img src="love"/> my name is <img src="mad"/> john, I am from <img src="world"/> Germany.</p>¿Con qué algoritmo puedo hacer esto?
En realidad, lo que quiero hacer es encontrar el emoji personalizado en el mensaje y convertirlo en una etiqueta img. este es el código que probé, pero este código solo convierte el primer emoticón que encuentra
customEmojis.map((item) => { const emoji = `:${item.short_names[0]}:`; if (newMessage.includes(emoji)) { const preEmojiMessage = newMessage.slice( 0, newMessage.indexOf(emoji) ); postEmojiMessage = newMessage.slice( newMessage.indexOf(emoji) + emoji.length, newMessage.length ); newMessage = preEmojiMessage; image = ( <img style={{ width: 25 }} src={item.imageUrl} /> ); } else { return newMessage; } }); <p> {newMessage} {image !== undefined && image} {postEmojiMessage} </p>solo necesita hacer un .replace en la cadena, y en la expresión regular, debe devolver la subcadena sin los caracteres ":".
Más información sobre .replace : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#specifying_a_string_as_a_parameter
let originalString = "<p>hello :love: my name is :mad: john, I am from :world: Germany.</p>"; let newString = originalString.replace(/(:)([a-zA-Z]*)(:)/g,'<img src="$2" />'); console.log(newString);yo haria algo como esto
document.getElementById("app").innerHTML = ` <p id="test">hello :love: my name is :mad: john, I am from :world: Germany.</p> `; let text = document.getElementById("test").innerHTML; console.log("text", text); // logs hello :love: my name is :mad: john, I am from :world: Germany. function parseText(text) { const strToMatch = text.match(/:[^ ]*:/g); // match everything between ":" if not containing the space char console.log("strToMatch", strToMatch); // logs [":love:", ":mad:", ":world:"] return strToMatch; } const toReplace = parseText(text); for (const word of toReplace) { const replaceWith = `<img src="${word.substring(1, word.length-1)}"/>` // removes ":" before and after text = text.replace(word, replaceWith) } console.log(text) // logs hello <img src="love"/> my name is <img src="mad"/> john, I am from <img src="world"/> Germany. <!DOCTYPE html> <html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> </head> <body> <div id="app"></div> <script src="src/index.js"> </script> </body> </html>En este problema, su objetivo es colocar el texto entre dos puntos dentro de la etiqueta img .
Puede hacer esto con una iteración básica usando el bucle while como lo he hecho en mi código a continuación.
// function to put text under colon in the img function imageTag(string){ let n = string.length let index = 0 let returnString = "" while(index < n){ // If the string have colon on the index, then iterate till the closing colon if(string[index] == ':'){ let tag = "" index += 1 while(string[index] != ':'){ tag += string[index] index += 1 } returnString += `<img src="${tag}"/>` } // else just add the character to the string that will be returned else returnString += string[index] index += 1 } return returnString } let initial = "<p>hello :love: my name is :mad: john, I am from :world: Germany.</p>" let final = imageTag(initial) console.log(final)