एचटीएमएल में टेक्स्ट (अक्षर या शब्द) या <br /> की पूर्ण या सापेक्ष स्थिति पाएं?

Question

मैं सोच रहा था कि क्या जावास्क्रिप्ट या jQuery का उपयोग कर एचटीएमएल में अक्षरों की स्थिति मिल सकती है? मुझे बहुत संदेह है कि यह संभव है, लेकिन यह मेरे जीवन को इतना आसान बना देगा।

वैकल्पिक रूप से, क्या js का उपयोग कर HTML में <br /> टैग की स्थिति को खोजने का कोई तरीका है?

अग्रिम धन्यवाद।

Answer 1

जैसा कि tdammers का उल्लेख है, आप जो भी सुझाव दे रहे हैं उसे संभालने के लिए एक प्रक्रिया को एक साथ रखने के सभी विवरणों को संभालने के लिए आपके द्वारा किए जा रहे कार्यों के आधार पर कई बारीकियों को संबोधित किया जा सकता है।

तुम क्या करने की कोशिश कर रहे हैं की मूल बातें है:

1. लेख रैप करें आप के लिए, यानी स्थिति खोजना चाहते हैं, पाठ के मामले में चारों ओर एक तत्व, शायद एक <span>।
2. या तो आपके द्वारा जोड़े गए तत्व या तत्वों के $.offset() या $.position() प्राप्त करें। जो भी आप चुनते हैं वह प्रासंगिक है जो आप करने की कोशिश कर रहे हैं; पहला document से संबंधित है, जिसमें तत्व के लिए दूसरा भाग है।

मैं "आकर्षण" एक ऐसा शब्द है position: absolute और top/left ऑफसेट सापेक्ष दृष्टि पैराग्राफ में पाया करने के लिए (<span> द्वारा स्थित साथ div s का उपयोग करके कई अनुच्छेदों में एक पाठ बॉक्स में टाइप करने के लिए एक स्क्रिप्ट का एक सरल डेमो बनाया उनके आसपास)।

नोट, यह केवल एक प्रदर्शन है ($.offset() का); यह उत्पादन तैयार कोड नहीं है। कोड स्निपेट के नीचे लाइव फीड डेमो का एक लिंक है।

सबसे पहले, मैंने पाया प्रत्येक शब्द के लिए एक हाइलाइट <div> खोजने और बनाने के लिए एक फ़ंक्शन बनाया।

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

फिर, मैं $.keyup() घटना के लिए एक कॉलबैक संलग्न: http://jsfiddle.net/WKgWM/

एचटीएमएल:

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

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

यह मानते हुए कि आप स्थिति जहां चरित्र पिक्सल में, स्क्रीन पर प्रदर्शित किया जाता है मतलब है:

jQuery या डोम, उनके ऑब्जेक्ट मॉडल में अलग-अलग पात्रों मॉडल नहीं है तो आप एक चरित्र की स्थिति सीधे नहीं पढ़ सकता।

सबसे अच्छा तरीका मैं सोच सकता हूं कि चरित्र (या बाद में) चरित्र के ठीक पहले एक डमी तत्व डालना है। एक विशेष वर्ग के साथ एक शून्य चौड़ाई अवधि, और फिर अपनी स्थिति प्राप्त करें। वैकल्पिक रूप से, आप चरित्र को ऐसे विशेष तत्व में लपेट सकते हैं, और फिर रैपर की स्थिति, चौड़ाई, ऊंचाई इत्यादि प्राप्त कर सकते हैं

यह अभी भी छोटा नहीं है, क्योंकि आपको HTML को स्कैन करने की आवश्यकता है, और आप नहीं चाहते हैं उन टैग्स को डालने से HTML को तोड़ें जहां वे संबंधित नहीं हैं - उदाहरण के लिए, यदि आप चरित्र 'डी' से मेल खाना चाहते हैं, तो आप <div> को <<span class="magic">d</span>iv> में बदलना नहीं चाहते हैं, क्योंकि यह अच्छी तरह से निर्मित HTML नहीं होगा।

साथ ही, उन डमी तत्वों को डालने से ब्राउजर को कर्नेलिंग को संभालने के तरीके के आधार पर थोड़ा लेआउट बदल सकता है।

Answer 3

js:

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

सीएसएस:

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