テキストブロック内の文字座標を取得する方法は？

モノスペーステキストのブロックには、マウスカーソルの下の文字の座標（行&のcolで、pageX & pageYではない）を取得し、文字を強調表示するJavaScriptスニペットまたはJQueryプラグインがありますか？テキストブロック内の文字座標を取得する方法は？

出典

2009-08-10 btw0

私はそれを行うために一緒にハッキングしたコードです。 <pre>のすべての文字を<span>でラップします。 <span>は、onmouseoverとonmouseoutを使用して文字を強調表示し、<div>の行と列を<pre>の下に置きます。

<html> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

    <style type="text/css"> 
     #coordText { 
      font-family: "Courier New", Courier, monospace; 
      overflow: auto; 
     } 
    </style> 

    <script type="text/javascript" > 
     function showinfo(row, col) { 
      $('div#info').html("row " + row + ", col " + col); 
      $('#r' + row + 'c' + col).css('background-color', '#ddd'); 
     } 
     function hideinfo(row, col) { 
      $('div#info').html(''); 
      $('#r' + row + 'c' + col).css('background-color', '#fff'); 
     } 
     $(document).ready(function() { 
     var text = $("#coordText").text(); 
     var html = ''; 
     var col = 1; 
     var row = 1; 
     for (var i=0; i<text.length; i++) { 
      if (text.charAt(i) == '\n' || text.charAt(i) == '\r') { 
       if (i > 0 && text.charAt(i-1) == '\r') 
        continue; 
       row++; 
       col = 1; 
       html += '<br />'; 
      } else { 
       html += '<span id="r' + row + 'c' + col; 
       html += '" onmouseover="showinfo(' + row + ', ' + col; 
       html += ')" onmouseout="hideinfo(' + row + ', ' + col; 
       html += ')">' + text.charAt(i) + '</span>'; 
       col++; 
      } 
     } 
     $("#coordText").html(html); 
     }); 
    </script> 
</head> 
<body> 
<pre id="coordText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Pellentesque imperdiet velit ut sem pulvinar pulvinar. 
Sed sed molestie justo. Mauris blandit est sit amet lacus cursus et porta lorem gravida. 
Nunc eget leo id diam faucibus lobortis non volutpat est. Fusce facilisis consectetur congue. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sodales lectus et ligula luctus sit amet ornare sem dignissim. 
Nunc fringilla tempus leo in accumsan. 
Cras facilisis quam non arcu mollis pretium. 
In hac habitasse platea dictumst. Maecenas vitae turpis ante. 
Cras lorem mauris, iaculis nec sollicitudin id, dapibus in nunc.</pre> 

<div id="info"></div> 

</body> 
</html>

出典

2009-08-10 20:23:47 Rob

-1フォーマット、短縮、説明してください – markus

このソリューションは、Firefox 3.5の大規模なテキストブロックでは非常に遅いです。 – btw0

テキストブロック内の文字座標を取得する方法は？

答えて

関連する問題