0

I have a huge list of names (over 10 000) and I need to look for instances of any of those (not case-sensitive). I need these words as jQuery elements, so I can add functionality to them. Is there an efficient way of doing this with jQuery?

Some more info as requested: I currently have the names as an array of strings in my javascript. The code should look for the names in all text on the page. They are names of creatures, to which I want to add a tooltip using Tipsy.

If it makes any difference, this is for a chrome extension. The question is mainly about how to find that many different strings efficiently in a page. I already found a bunch of ways to do this if you're looking for only one word, though iterating over the list of words and doing it separately for each seems like a bad way of doing it.

Thanks!

The Oddler
  • 6,314
  • 7
  • 51
  • 94
  • What is the format of the list? What kind of elements do you want them to be? Look for iinstances of them where? What kind of functionality will be added? Do you have any code or pseudo-code that you can share? – Jay Blanchard Apr 30 '14 at 19:34
  • I added a bit more information to my question. Though I wasn't sure about what kind of element I need, it doesn't really matter I think, tipsy can add a tooptip to everything I tried so far. – The Oddler Apr 30 '14 at 19:55
  • Are the words the `id`'s of elements or the text of elements? I'm missing the link between the words and the elements. – War10ck Apr 30 '14 at 20:01
  • No, the words are just parts of the text on a page. It should also work on any website that I didn't make, so where I can't just add id's to the words. – The Oddler Apr 30 '14 at 20:16

1 Answers1

1

I don't know about the performance of this code against a 10,000 values' array.. but I found this code here : Find text string in jQuery and make it bold

And I made minor modification here : http://jsfiddle.net/rsta/fqtaV/2/

Basicly, I reuse the elclanrs' code, but added a class 'word' to the tag and move the array out of the function call, so it will be more easier to read your already existing array.

$.fn.wrapInTag = function (opts) {

    var tag = opts.tag || 'strong',
        words = opts.words || [],
        regex = RegExp(words.join('|'), 'gi') // case insensitive
        ,
        replacement = '<' + tag + ' class="word">$&</' + tag + '>';

    return this.html(function () {
        return $(this).text().replace(regex, replacement);
    });
};

// list
var name_array = new Array('john', 'ringo', 'paul', 'george');

// Usage
$('body').wrapInTag({
    tag: 'span',
    words: name_array
});
Community
  • 1
  • 1
Richer St-Amand
  • 96
  • 1
  • 7
  • The problem I'm having now, is that it replaces the names everywhere in the HTML. Some website I tested already have links (or something) for the names, and their id is also set to the name I'm replacing. That messes up the hltm since it also tries to wrap those id's in spans. Any way to fix that? So it only replaces the names in actual text? – The Oddler May 01 '14 at 10:16
  • Hi, Can you provide a jsfiddle that reproduce your issue ? I noted that the original code was taking the text of the page instead of the html. That cause all html to be remove by the code. I have fixed this, but I'm not sure that answer the issue you mention. – Richer St-Amand May 01 '14 at 13:26