Escribí un fragmento de código JavaScript y quiero implementar dos funciones:
1: Divide un fragmento de texto en matrices de palabras separadas. Hasta ahora, he usado regex para buscar espacios y puntuación. Hace parte de la funcionalidad, pero no puede hacer nada con el código de espacio en blanco .
2: Envuelva cada palabra en el HTML con una etiqueta de span . (No sé cómo debo implementar esto)
este es el codigo:
<!DOCTYPE html> <html> <head> <script> window.onload = function() { var text = document.getElementById('text').textContent // Regex cannot search for ` ` var word_array = text.split(/[ \t\n\r.?,"';:!()[\]{}<>\/]/) console.log(text) console.log(word_array) } </script> </head> <body> the other text <div id="text"> this is text,break up the;words! istest testis, text <a href="#">text build</a> html tag! </div> the other text </body> </html> Sin embargo, mi código no separa las tres palabras. Por ejemplo, break up the , debería convertirse en [break,up,the] .
Además, no envolví todas las palabras en el div con etiquetas de span , así:
<div id="text"> <span id='word_1'>this</span> <span id='word_2'>is</span> ... <span id='word_3'>text</span> <a href="#"><span id='word_4'>text</span> <span id='word_5'>build</span></a> <span id='word_6'>html</span> <span id='word_7'>tag</span>! </div>\s hará el trabajo. Tu puedes cambiar:
var word_array = text.split(/[ \t\n\r.?,"';:!()[\]{}<>\/]/) ^^a:
var word_array = text.split(/[\s\t\n\r.?,"';:!()[\]{}<>\/]/) ^^ Por cierto, \s es una abreviatura de [ \t\r\n\f] . Entonces puedes simplificar tu expresión a:
var word_array = text.split(/[\s.?,"';:!()[\]{}<>\/]/)Entonces es posible que deba eliminar elementos vacíos de la matriz:
//remove '' from word_array var word_array2 = word_array.filter(e => e != '') Para la pregunta 2, el siguiente código envolverá las palabras de texto con la etiqueta span : Editado en base al comentario de @dong
function add_span(word_array, element_) { for (let i = 0; i < word_array.length; i++) { var reg = new RegExp("([\s.?,\"';:!(){}<>])(" + word_array[i] + ")([\s.?,\"';:!])", 'g'); element_ = element_.replace(reg, '$1<span>$2</span>$3'); } return element_ }