Metnin mutlak veya göreli konumunu (harf veya kelime) veya html'de <br /> mu?

Question

javascript veya jQuery kullanarak html'de harflerin konumunu bulabilmemin bir yolu olup olmadığını merak ediyordum? Bunun mümkün olduğundan şüpheliyim, ama hayatımı çok daha kolaylaştıracaktı.

Alternatif olarak, js kullanarak html içinde <br /> etiketlerinin konumunu bulmak için bir yolu var mı?

Şimdiden teşekkürler.

Answer 1

Tüyecilerden bahsettikleri gibi, önerilerinizin üstesinden gelmek için bir süreci bir araya getirmenin tüm ayrıntılarını ele almak, yaptığınız şeye bağlı olarak, ele alınması gereken pek çok ayrıntıya sahiptir.

Yapmaya çalıştığınız şeyin temeli şudur:

1. Wrap metnin durumda yani için pozisyon bulmak istediğiniz metnin etrafında bir eleman, muhtemelen <span>.
2. Eklediğiniz öğe veya öğelerin $.offset() veya $.position() öğelerini kullanın. Hangisini seçerseniz seçin, yapmaya çalıştığınız şeyle ilgilidir; Birincisi, document ile ilgilidir, ikincisi içeren eleman.

ben "vurgulamak" bir terim <span> tarafından bulunan paragraflarda bulunan terimlerin göre position: absolute ve top/left uzaklıklar (ile div s kullanarak birkaç paragraflarda bir metin yazdığınız bir senaryonun basit demo yarattı onları çevreleyen).

Not: Bu sadece bir gösterimdir ($.offset()); üretim hazır kod değil. Kod parçacıklarının altında canlı keman demosunun bir bağlantısı var.

İlk olarak, bulunan her terim için bir <div> işaretini bulmak ve oluşturmak için bir işlev oluşturdum.

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); 
     }); 
    }); 
} 

Sonra, $.keyup() olay için bir geri arama bağlı: http://jsfiddle.net/WKgWM/

html:

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

eylem

$('#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

karakter piksel olarak ekranda görüntülenir pozisyon anlamına varsayarsak: Doğrudan bir karakterin pozisyonunu okuyamaz böylece

jQuery veya DOM, onların nesne modellerinde bireysel karakterleri modellemek yoktur.

Düşünebildiğim en iyi yol, karakterden hemen önce (veya sonra) bir taklit öğesi yerleştirmektir, örn. Özel bir sınıfla sıfır genişlikli bir açıklık ve ardından konumunu al. Alternatif olarak, karakteri bu kadar özel bir öğeye sarabilir ve daha sonra sarıcının konumunu, genişliğini, yüksekliğini vb. Alabilirsiniz.

Hala önemsiz değil, çünkü HTML'yi taramanız gerekiyor ve istemiyorsunuz HTML'yi, ait olmayan etiketlere ekleyerek kesin - örneğin, 'd' karakteriyle eşleştirmek istiyorsanız, iyi biçimlendirilmiş bir HTML olmayacak şekilde 'u <<span class="magic">d</span>iv>'a dönüştürmek istemezsiniz.

Ayrıca, bu kukla öğelerin eklenmesi, tarayıcının karakter aralığı nasıl işlediğine bağlı olarak düzeni biraz değiştirebilir.

Answer 3

js:

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

css: Sen "html harflerin pozisyonuna" ile ne demek tanımlamak zorunda gidiyoruz

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