Buscar la posición absoluta o relativa del texto (letra o palabra) o <br /> en html?

Question

Me preguntaba si hay alguna manera de encontrar la posición de las letras en html con javascript o jQuery. Dudo mucho que esto sea posible, pero haría mi vida mucho más fácil.

Alternativamente, ¿hay alguna manera de encontrar la posición de las etiquetas <br /> en html usando js?

Gracias de antemano.

Answer 1

Como tdammers menciona, el manejo de todos los detalles de armar un proceso para manejar lo que sugiere tiene muchos matices que pueden tener que abordarse, dependiendo de lo que esté haciendo.

Los fundamentos de lo que estamos tratando de hacer es:

1. Wrap un elemento en todo el texto que desea encontrar la posición para, por ejemplo, en el caso de texto, probablemente un <span>.
2. Obtenga $.offset() o $.position() del elemento o elementos que ha agregado. Cualquiera que elija es relevante para lo que está tratando de hacer; el primero es relevante para el document, el segundo para el elemento que lo contiene.

creé una demostración simple de una secuencia de comandos para "destacado", un término escrito en un cuadro de texto en varios párrafos usando div s con position: absolute y top/left compensaciones en relación con las condiciones que se encuentran en los párrafos (que se encuentra por el <span> rodeándolos).

Nota, esto es solo una demostración (de $.offset()); no es un código listo para producción. Hay un enlace a la demo de violín en vivo debajo de los fragmentos de código.

Primero, creé una función para buscar y crear un resaltado <div> para cada término encontrado.

function highlightWordPositions(word) { 
    var $paras = $('p'), 
     $spans, 
     _top = 0, 
     _left = 0; 

    $paras.each(function(){ 
     var $p = $(this), 
      regex = new RegExp(word, 'g'); 

     $p.html($p.text().replace(regex, '<span>' + word + '</span>')); 
     $spans = $p.find('span'); 

     $spans.each(function(){ 
      var $span = $(this), 
       $offset = $span.offset(), 
       $overlay = $('<div class="overlay"/>'); 

      $overlay 
       .offset($offset) 
       .css({ 
        width: $span.innerWidth(), 
        height: $span.innerHeight() 
       }).show(); 

      $(document.body).append($overlay); 
     }); 
    }); 
} 

A continuación, os adjunto una devolución de llamada al evento $.keyup():

$('#term').keyup(function(event){ 
    var term = this.value; 

    if (term == '') { 
     $('.overlay').remove(); 
     return false; 
    } else if (term.indexOf(' ') != -1) { 
     this.value = term.replace(' ', ''); 
     return false; 
    } 

    $('.overlay').remove(); 

    highlightWordPositions(term); 
}); 

http://jsfiddle.net/JaN75/

Answer 2

Suponiendo que te refieres a la posición en la que se muestra el carácter en la pantalla, en píxeles:

jQuery o el DOM no modelan caracteres individuales en sus modelos de objetos, por lo que no puede leer la posición de un carácter directamente.

Lo mejor que puedo pensar es insertar un elemento ficticio justo antes (o después) del personaje, p. un intervalo de ancho cero con una clase especial, y luego obtener su posición. Alternativamente, puede envolver el personaje en un elemento tan especial, y luego obtener la posición, ancho, alto, etc. de la envoltura

Todavía no es trivial, porque necesita escanear el HTML, y no desea rompa el HTML insertando etiquetas a las que no pertenecen; por ejemplo, si desea hacer coincidir el carácter 'd', no desea convertir <div> en <<span class="magic">d</span>iv>, ya que eso no sería HTML bien formado.

Además, la inserción de esos elementos ficticios puede modificar ligeramente el diseño, dependiendo de cómo maneje el kerning el kerning.

Answer 3

en acción: http://jsfiddle.net/WKgWM/

html:

<p>Percussus ait in fuerat construeret cena reges undis effugere quod una.</p>​ 

JS:

var selection = "dis"; 
var spn = '<span class="selected">'+selection+'</span>'; 
$("p").html($("p").html().replace(selection,spn)); 

css:

.selected{ 
    background-color:#FF00FF; 
}​