Hi Neil,
A normal loop looks something like this:
for (var i = 0; i < searchTerms.length; i++) {
// Do something in the loop.
}
I've been trying out this highlighting script and it works OK. The
biggest problem seems to be that it doesn't highlight every instance
of the search terms. I'm going to try to write something that walks
the DOM and does the replace on individual text nodes rather than a
giant regular expression search and replace. Maybe that will be too
slow. We'll have to see.
Hope this helps.
Ben
On Sep 1, 9:58 am, Neil <[EMAIL PROTECTED]> wrote:
> No ideas on how to port over to a 'normal' loop? I'm struggling with
> this one, that's for sure! I tried the server side route, but it makes
> things far more complex and this, the client side approach, looks far
> more suitable...
>
> Neil wrote:
> > Hi T.J.
>
> > I spend quite a bit of time with both the searchTerms.each() and
> > loops, but having no skills in js I just can't convert this script
> > over (i.e. I can't even get it to have the same, incorrect
> > funcionality);
>
> > // Split search terms on '|' and iterate over resulting array
> > var searchTerms = searchString.split('|');
> > for (var i in searchTerms) {
> > // The regex is the secret, it prevents text within tag
> > declarations to be affected
> > var regex = new RegExp(">([^<]*)?("+searchTerms[i]+")([^>]*)?
> > <","ig");
> > highlightTextNodes(textContainerNode, regex, i);
> > }
>
> > I tried several variations, with this as a starting point;
>
> > // Split search terms on '|' and iterate over resulting array
> > var searchTerms = searchString.split('|');
> > searchTerms.each(function(i) {
> > // The regex is the secret, it prevents text within tag
> > declarations to be affected
> > var regex = new RegExp(">([^<]*)?("+searchTerms[i]+")([^>]*)?
> > <","ig");
> > highlightTextNodes(textContainerNode, regex, i);
> > }
>
> > I even told myself that his one was definitely going to work;
>
> > // Split search terms on '|' and iterate over resulting array
> > var searchTerms = searchString.split('|');
> > searchTerms.each(var(item) {
> > // The regex is the secret, it prevents text within tag
> > declarations to be affected
> > var regex = new RegExp(">([^<]*)?("+item+")([^>]*)?<","ig");
> > highlightTextNodes(textContainerNode, regex, item);
> > }
>
> > But no luck...
>
> > Any ideas? Thanks
>
> > On Aug 19, 11:47 am, "T.J. Crowder" <[EMAIL PROTECTED]> wrote:
> > > Hi,
>
> > > > ...do
> > > > you think I can use either 'vanilla loops' or iterators to fix this?
>
> > > If by "vanilla loops" you mean good old-fashioned:
>
> > > var n;
> > > for (n = 0; n < thearray.length; ++n)
> > > {
> > > /* Do something with thearray[n] */
> > > }
>
> > > ...then yes, either those or using the each() method that Prototype
> > > provides on arrays (which just does that under the covers) will fix
> > > the for..in problem. I don't know whether that's the only problem,
> > > but it will almost certainly be *a* problem, so worth fixing.
> > > --
> > > T.J. Crowder
> > > tj / crowder software / com
>
> > > On Aug 18, 9:37 pm, Neil <[EMAIL PROTECTED]> wrote:
>
> > > > Hi T.J.
>
> > > > My friend knows far more than me about Rails & JS, so I took his word
> > > > on going to a prototype community. The Rails default js includes are;
>
> > > > <script src="/javascripts/prototype.js" type="text/javascript"></
> > > > script>
> > > > <script src="/javascripts/effects.js" type="text/javascript"></script>
> > > > <script src="/javascripts/dragdrop.js" type="text/javascript"></
> > > > script>
> > > > <script src="/javascripts/controls.js" type="text/javascript"></
> > > > script>
> > > > <script src="/javascripts/application.js" type="text/javascript"></
> > > > script>
>
> > > > I appreciate the pointers. I have a little js knowledge and my pure
> > > > programming knowledge is flaky (I'm okay with Rails & CRUD, but that's
> > > > quite different to real JS or Ruby) so I think it'll take me a while
> > > > to work out how to fix it. I'm coming back to the problem tomorrow, do
> > > > you think I can use either 'vanilla loops' or iterators to fix this?
>
> > > > Thanks
>
> > > > On Aug 18, 9:10 am, "T.J. Crowder" <[EMAIL PROTECTED]> wrote:
>
> > > > > Hi,
>
> > > > > Just to clarify, is this related to Prototype or script.aculo.us at
> > > > > all? I don't think either of them is used in the original script.
> > > > > Are you using them in your page? Apologies, I know nothing about
> > > > > Rails, so if Prototype is used in the default javascript output by
> > > > > Rails...
>
> > > > > If your page *is* using Prototype, the *a* problem (not necessarily
> > > > > *the* problem) is that the code uses "for...in" on an array, which is
> > > > > a poor practice (for..in is for iterating object properties, not array
> > > > > elements) that usually works, but doesn't work if the Array object has
> > > > > been extended. Prototype extends Array objects; more
> > > > > here:http://www.prototypejs.org/api/array
>
> > > > > HTH,
> > > > > --
> > > > > T.J. Crowder
> > > > > tj / crowder software / com
>
> > > > > On Aug 18, 8:07 am, Neil <[EMAIL PROTECTED]> wrote:
>
> > > > > > Hi All
>
> > > > > > First post here. My friend (who actually knows js, whereas I don't)
> > > > > > suggested I post my problem here. I'm working on a Rails app, with
> > > > > > the
> > > > > > default js includes, and trying to get search result highlighting in
> > > > > > place. The most up to date script for this seems to be found here
> > > > > > (unless you guys know of something more appropriate for my
> > > > > > scenario);
>
> > > > > >http://eriwen.com/javascript/highlight-search-results-with-js/#commen...
>
> > > > > > So far, I've swapped over the getSearchString method to pull my
> > > > > > search
> > > > > > terms from my #searchinput (rather than the URL) by using the
> > > > > > innerHTML method, and also told it to look for the input with an
> > > > > > attribute of 'search' when judging whether or not to load (rather
> > > > > > than
> > > > > > attribute name 's'). Right now, it's playing havoc with the script &
> > > > > > DOM; highlighted spans are everywhere within the textContainer node
> > > > > > (pretty much before or after every search term match in the
> > > > > > textContainerNode), but none of them actually wrap the search term
> > > > > > matches;
>
> > > > > > function highlightOnLoad() {
>
> > > > > > // Get search string
> > > > > > if (/search\=/.test(window.location.search)) {
> > > > > > var searchString = getSearchString();
> > > > > > // Starting node, parent to all nodes you want to search
> > > > > > var textContainerNode =
> > > > > > document.getElementById("main");
>
> > > > > > // Split search terms on '|' and iterate over resulting array
> > > > > > var searchTerms = searchString.split('|');
> > > > > > for (var i in searchTerms) {
> > > > > > // The regex is the secret, it prevents text within tag
> > > > > > declarations to be affected
> > > > > > var regex = new RegExp(">([^<]*)?("+searchTerms[i]+")([^>]*)?
> > > > > > <","ig");
> > > > > > highlightTextNodes(textContainerNode, regex, i);
> > > > > > }
> > > > > > }
>
> > > > > > }
>
> > > > > > // Pull the search string out of the URL
> > > > > > function getSearchString() {
> > > > > > // Return sanitized search string if it exists
> > > > > > var rawSearchString =
> > > > > > document.getElementById("searchinput").innerHTML.replace(/[a-zA-Z0-9\?
> > > > > > \&\=\%\#]+s\=(\w+)(\&.*)?/,"$1");
> > > > > > // Replace '+' with '|' for regex
> > > > > > // Also replace '%20' if your cms/blog uses this instead (credit to
> > > > > > erlando for adding this)
> > > > > > return rawSearchString.replace(/\%20|\+/g,"\|");
>
> > > > > > }
>
> > > > > > function highlightTextNodes(element, regex, termid) {
> > > > > > var tempinnerHTML = element.innerHTML;
> > > > > > // Do regex replace
> > > > > > // Inject span with class of 'highlighted termX' for google style
> > > > > > highlighting
> > > > > > element.innerHTML = tempinnerHTML.replace(regex,'>$1<span
> > > > > > class="highlighted term'+termid+'">$2</span>$3<');
>
> > > > > > }
>
> > > > > > // Call this onload, I recommend using the function defined
> > > > > > at:http://untruths.org/technology/javascript-windowonload/
> > > > > > window.onload = highlightOnLoad;
>
> > > > > > I've stripped out a few methods I don't need (like the 'search
> > > > > > results
> > > > > > for' div insertion) but don't worry, I pulled them out one-by-one
> > > > > > and
> > > > > > checked that they made no difference to what I already had.
>
> > > > > > Would anyone know how I can get these search terms wrapped by the
> > > > > > spans? I bet it has something to do with using the innerHTML and not
> > > > > > looping through the collection of terms correctly. Any help is very
> > > > > > much appreciated.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
