Dans <div>, faites défiler jusqu'à la première occurrence d'une chaîne donnée

Dans mon tag div, il existe de nombreuses lignes de texte vraiment long et l'élément div est actuellement en mode défilant. Ce que j'aimerais faire est de trouver la première occurrence d'une chaîne particulière et de faire défiler automatiquement vers la ligne qui contient cette chaîne. Il n'y a aucune rupture de ligne ni aucun type de délimiteur de chaîne que je pourrais utiliser pour me rapprocher facilement de la position de défilement.

Je suppose que je pourrais faire quelque chose comme ça:

var max_chars_per_line = approximated max # of chars that can fit into one line; var font_height = approximated font height in px; var needle = string to look for; var haystack = content in the <div> tag; var index = haystack.indexOf(needle); var num_lines_to_skip = index / max_chars_per_line; my_div_tag.scrollTo(num_lines_to_skip * font_height);

Je ne peux m'empêcher de me demander s'il y a une meilleure solution (javascript / jQuery) là-bas. Ma propre diligence n'a pas trouvé de problème.

 <p id="text">Lorem ipsum ... lots of text.... onion</p>

JQ:

 var needle = 'onion'; $('#text').html($('#text').html().replace(needle, '<a id="imhere"></a>'+needle)); $('html,body').animate({scrollTop: $('#imhere').offset().top}, 500);

Demo http://jsfiddle.net/vq7LD/

Si c'est le cas où tout votre texte est dans une seule division, quelque chose comme cette solution fonctionne.

 var goto = function(str){ var content = $('#content').html(); $('#content').html( content.replace(str,'<a name="goto">'+str+'</a>') ); window.location = '#goto'; } goto('Whatever your string is here');

http://jsfiddle.net/NmhHH/

Ne pourriez-vous pas faire quelque chose d'analogue à l'utilisation du code de type Java suivant:

  var lineToTest = getLine(textArray); if(lineToTest.contains(testingLine){ lineIndex = getLineNumber(textArray-1); //since it already accessed the line it'll have to access the next and subtract 1. }

Ensuite, utilisez simplement la technique de mise en surbrillance pour mettre en évidence la ligne. Vous devriez évidemment créer vos fonctions getLine, getLineNumber. À moins qu'il n'y ait des fonctions cool jQuery là-bas (ce qui est probablement le cas).