Digamos que tengo una cadena Hey @eli check out this link: https://stackoverflow.com
Idealmente, quiero convertir esto en una matriz como [{type: 'text', content: 'Hey '}, {type: 'mention', content: '@eli'}, {type: 'text', content: ' check out this link: '}, {type: 'href', content: 'https://stackoverflow.com'}] para que pueda agregar estilos o envolver ciertas cadenas de texto.
Actualmente estoy haciendo esto con una serie de .split()s, pero se siente algo complejo. ¿Existe una manera más fácil de aislar/dividir una cadena, en función de los caracteres/cadenas finales?
Solución actual para #s y @s:
const valueAsArray = [] value.split(/\r?\n/).forEach((line) => { if (line) { const line_: Line[] = []; line.split(' ').forEach((space, i) => { space.split('@').forEach((mention, i) => { if (i === 0) { mention.split('#').forEach((hashtag, i) => { if (i === 0) { line_.push({ type: 'text', content: hashtag }); } else { line_.push({ type: 'hashtag', content: `#${hashtag}` }); } }); } else { line_.push({ type: 'mention', content: `@${mention}` }); } }); line_.push({ type: 'text', content: ' ' }); }); valueAsArray.push({ type: 'line', content: line_ }); } else { valueAsArray.push({ type: 'spacer' }); } });Simplemente usaría expresiones regulares para toda la búsqueda de palabras clave, usando la tubería o | separando las diferentes palabras clave
const keys = /([@#]\S+|https\S+)/gi @ o # + cadena de caracteres
tecla ^
https + cadena de caracteres
^ otra clave
Y luego terminarías con una matriz como esta:
const valueAsArray = []; value.split(keys).forEach(item => { if (item[0] == '@' || item[0] == '#'){ valueAsArray.push({ type: 'mention', content: item }); } else if (item.includes('https')){ valueAsArray.push({ type: 'href', content: item }); } else { valueAsArray.push({ type: 'text', content: item }); } });Tal vez haya una manera más eficiente, pero pensé que esta probablemente sería la más flexible en su caso. Espero que esto ayude