He leído un excelente artículo sobre cómo colocar y escalar texto en SVG-Circles. El algoritmo de ajuste de texto que se muestra allí utiliza la siguiente línea de código:
const words = text.split(/\s+/g); // To hyphenate: /\s+|(?<=-)/La idea de este fragmento es crear una lista a partir de una palabra "Texto de tamaño propio en un círculo" -> ["Tamaño propio", "Texto", "en", "a", "Círculo"].
^^El algoritmo funciona a las mil maravillas, pero la versión con guión no funciona en Safari:
const words = text.split(/\s+|(?<=-)/g); // Not working in SafariExpresión regular no válida: nombre de especificador de grupo no válido
El resultado debe ser ["Auto-", "Tamaño", "Texto", "en", "a", "Círculo"]. Observe la división de "Self-Sizing" manteniendo el guión como parte de la primera palabra.
Para que el ejemplo se ejecute en todos los navegadores, menciono esta solución:
text = text.replace(/-/g, "- "); // add a space next to the hyphen const words = text.split(/\s+/g); // split using spacesSin embargo, resolver esto de una manera exclusiva de expresiones regulares parece ser más elegante, especialmente cuando se amplía el alcance de los caracteres que se utilizarán para envolver.
Por lo tanto, me gustaría preguntarles como comunidad si tienen una idea mejor.
Puede encontrar un área de juegos completa aquí (helpers.js -> línea 7) o puede echar un vistazo a Stack Snipped a continuación:
const text = "Self-Sizing Text in a Circle"; const words = text.split(/\s+|(?<=-)/g); console.log(words);La .split(/\s+|(?<=-)/) significa que la cadena se divide en fragmentos de caracteres que no son espacios en blanco y en las ubicaciones justo después de un - carácter. Significa que puede extraer cualquier fragmento de caracteres que no sean espacios en blanco con un guión opcional justo después, o cualquier otro guión (que en realidad serán los guiones justo después de la primera alternativa).
const words = text.match(/[^\s-]+-?|-/g)Vea la demostración de expresiones regulares . Detalles :
[^\s-]+-? - uno o más caracteres que no sean espacios en blanco y - y luego un guión opcional| - o- - un guión.Vea la demostración de JavaScript:
const text = "Self-Sizing Text in a Circle"; const words = text.match(/[^\s-]+-?|-/g) console.log(words);Tenga en cuenta que si no necesita cuidar los guiones consecutivos, iniciales y finales, simplemente puede usar
const words = text.match(/[^\s-]+-?/g) [^\s-]+-? coincidirá con uno o más caracteres que no sean espacios en blanco y - y luego un único opcional -