En mi proyecto, usamos RegExp para mostrar el título de las cartas que recibimos del mazo. Y recientemente descubrí que desde el lado de la plataforma a veces recibimos diferentes formatos y los títulos no se muestran.
Entonces, antes siempre era una cadena como esta:
const res = `<p class="cardTitle" style="font-size: 27.2px"> <span>Some text here</span><span> - Title</span> </p>`;y el RegExp fue:
/<p class="cardTitle"[^>]*>[\s]*<span[^>]*>(.+)<\/span><span[^>]*>(.+)<\/span><div[^>]*>(.+)<\/div>+[\s]*<\/p>/i.exec(res); Ahora a veces recibimos res con etiquetas div y <br> dentro
const res = `<p class="cardTitle" style="font-size: 27.2px"> <span>Some text here</span><span> - Title</span> <div style="font-size: 10px">Title:<br>Some text here</div> </p>`; La pregunta es, ¿cómo cambiar RegEx para ignorar este <div>..<br>.</div> ?
Aquí hay una demostración:
const res = `<p class="cardTitle" style="font-size: 27.2px"> <span>Some text here</span><span> - Title</span> </p>`; const newRes = `<p class="cardTitle" style="font-size: 27.2px"> <span>Some text here</span><span> - Title</span> <div style="font-size: 10px">Title:<br>Some text here</div> </p>`; const regEx = /<p class="cardTitle"[^>]*>[\s]*<span[^>]*>(.+)<\/span><span[^>]*>(.+)<\/span>+[\s]*<\/p>/i; const correct = regEx.exec(res); const broken = regEx.exec(newRes); console.log('correct', correct); console.log('broken', broken);Estaría muy agradecido por cualquier ayuda!
Simplificar la expresión regular
/<p class="cardTitle"[^>]*>\s*<span[^>]*>(.*?)<\/span><span[^>]*>(.*?)<\/span>.*?<\/p>/si Esto obtendrá la etiqueta p , con los 2 intervalos y cualquier otra cosa que contenga.
const res = `<p class="cardTitle" style="font-size: 27.2px"> <span>Some text here</span><span> - Title</span> </p>`; const newRes = `<p class="cardTitle" style="font-size: 27.2px"> <span>Some text here</span><span> - Title</span> <div style="font-size: 10px">Title:<br>Some text here</div> </p>`; const regEx = /<p class="cardTitle"[^>]*>\s*<span[^>]*>(.*?)<\/span><span[^>]*>(.*?)<\/span>.*?<\/p>/si; const correct = regEx.exec(res); const broken = regEx.exec(newRes); console.log('correct', correct); console.log('broken', broken);Analice el htmlString en el DOM, luego extraiga el texto.
const res = `<p class="cardTitle" style="font-size: 27.2px"> <span>Some text here</span><span> - Title</span> <div style="font-size: 10px">Title:<br>Some text here</div> </p>`; const getNodes = str => { document.body.insertAdjacentHTML('beforeEnd', str); const DOM = document.querySelector('.cardTitle'); return DOM.innerText; }; console.log(getNodes(res));