Estoy tratando de dividir diferentes partes de una cadena en nuevos objetos dependiendo de si hay marcado HTML. Esto es lo que probé, también probé con split() , sin embargo, no puedo encontrar una manera de extraer el contenido dentro de las marcas HTML.
const example = 'The lucky stars is an astrology themed <a href="/game/">game</a> and it consists of <strong>thousands of.</strong>' const richTexts = []; example.match(/\<.*?\>/g).forEach((e) => { if (e.includes('<a')) { richTexts.push({ type: 'hyperlink', content: '' }) } else if (e.includes('<strong') { richTexts.push({ type: 'bold', content: '' }) } else { richTexts.push({ type: 'text', content: '' }) } }) console.log(richTexts);La salida deseada es:
[ { type: 'text', content: 'The lucky stars is an astrology themed ' }, { type: 'hyperlink', content: 'game' }, { type: 'text', content: ' and it consists of ' }, { type: 'bold', content: 'thousands of.' } ]No es elegante, pero resuelve tu ejemplo:
const example = 'The lucky stars is an astrology themed <a href="/game/">game</a> and it consists of <strong>thousands of.</strong>' const richTexts = []; const res = example.split('<') res.forEach(r => { let obj = {} if(r.includes('>')) { if(r.includes('strong')){ obj.type= "bold" } else if (r.includes('href')) { obj.type = "hyperlink" } else { obj.type = 'text' } } else { obj.type = 'text' } r = r.slice(r.indexOf('>') + 1, r.length) if(r.length) { obj.content = r richTexts.push(obj) } }) console.log(richTexts)Mi sugerencia:
const example = 'The lucky stars is an astrology themed <a href="/game/">game</a> and it consists of <strong>thousands of.</strong>'; const richTexts = []; var strType; example.split(/((?:[^\s<]*<\w[^>]*>[\s\S]*?<\/\w[^>]*>)+[^\s<]*)/).filter(Boolean).forEach(e => { strType = 'text'; if (e.includes('<a')) { strType = 'hyperlink' } else if (e.includes('<strong')) { strType = 'bold' }; richTexts.push({ type: strType, content: strType === 'text' ? e : e.replace(/(<([^>]+)>)/g, '') }); }); console.log(richTexts);