Obtener la posición del texto dentro de un elemento

Si tengo un elemento, por ejemplo:Obtener la posición del texto dentro de un elemento

<p>Lorem ipsum dolor sit amet, ante risus massa adipiscing quisque quis. At mauris tellus in, sed vehicula integer fermentum rhoncus at faucibus, in vitae purus. Maecenas in vel ligula orci tellus ac, fringilla conubia lorem elit. Dui nulla sodales morbi vel. Massa sed viverra. Maecenas imperdiet donec urna a, ligula sed</p>

Y esto fluyó a través de múltiples líneas:

Lorem ipsum dolor sit amet, ante risus massa adipiscing 
quisque quis. At mauris tellus in, sed vehicula integer 
fermentum rhoncus at faucibus, in vitae purus. Maecenas 
in vel ligula orci tellus ac, fringilla conubia lorem 
elit. Dui nulla sodales morbi vel. Massa sed viverra. 
Maecenas imperdiet donec urna a, ligula sed

¿Es posible averiguar la posición (en x, y coords) de un personaje en particular en el texto usando JavaScript? Si esto falla, ¿podría obtener la posición y de cada línea en el texto que fluye?

Atención:: Hay una gran cantidad de texto en la etiqueta <p> en mi solicitud, por lo que añadir <span> alrededor de cada carácter/palabra sería demasiado procesamiento.

Fuente

2011-02-28 Jamie

que está diciendo que necesita compensaciones para cada carácter + palabra en lugar de sólo unos pocos específicos? – Rup

@Rup buen comentario. De hecho, solo necesito la posición y de cada línea en el texto. Aunque dado que es un texto fluido, no supongo que realmente marque la diferencia. Actualizó la pregunta de todos modos. – Jamie

Tal vez esto te ayude: http://blog.mastykarz.nl/measuring-the-length-of-a-string-in-pixels-using-javascript/ – pimvdb

Si conoce la posición de la cadena del carácter en el texto , puede envolver el personaje en un < span> o elemento similar con un ID y encontrar las coordenadas x, y de ese elemento. La manera más fácil de hacerlo es con jQuery u otra biblioteca, vea this respuesta para un método de navegador cruzado sin biblioteca.

Fuente

2011-02-28 15:01:18 glomad

Demasiado procesamiento en mi caso, pero buena solución. Pregunta actualizada para reflejar esto. – Jamie

No necesita envolver a cada personaje en un lapso, solo aquel cuyas coordenadas necesita. Una vez que obtenga el puesto, puede desenvolverlo. – glomad

En mi caso, estaba buscando la posición de las líneas con tolerancia + -2 líneas más o menos. Descubrí que el truco del tramo funciona de manera bastante eficiente si solo buscas palabras con caracteres de puntuación [.,!? -]. En las oraciones en inglés, encontrará signos de puntuación casi en cada línea de texto (a menos que tenga columnas muy pequeñas). Como tal, buscar esas palabras le dará la posición de casi cualquier línea de texto. Regex para tales palabras sería: /\S+[,.!?-]/gi –

Idea que consigo es - conseguir todo el texto, el paquete de subcadena requerida en lapso de s, reemplazar innerHtml elemento, y obtener la posición del span-s

Fuente

2011-02-28 14:57:48 SergeS

Estoy de acuerdo en que funcionaría, aunque es demasiado procesamiento para lo que necesito. esto para. Buena idea sin embargo. – Jamie

Puede usar rangos para buscar la posición de los elementos. jsFiddle rápido aquí: https://jsfiddle.net/abrady0/ggr5mu7o/

var range = document.createRange(); 
range.setStart(parentElt, start); 
range.setEnd(parentElt, end); 
// These rects contain the client coordinates in top, left 
var rects = range.getClientRects();

Editar: modificado para imprimir las coordenadas del rect emparejado

Fuente

2015-04-27 18:41:25 aaron

Esto es útil para obtener el índice de caracteres de donde hace clic el usuario, pero creo que OP estaba buscando las coordenadas x, y en píxeles. – tobek

mal, debería haber sido más claro en mi ejemplo: las rectas del cliente contienen las coordenadas del cliente donde ocurrió el clic.esto se puede usar fácilmente para apuntar a un personaje específico o conjunto de caracteres. – aaron

Obtener la posición del texto dentro de un elemento

Respuesta

Cuestiones relacionadas