This is my first post, but I've loved using this site as resource for quite awhile now. However, the time has now come for me to ask a question...
I have found plenty of JavaScript highlighter plugins during my research into this question, but they all focus on finding one word. For a fan-site I am creating (Mega Man Battle Network, for those interested), I would like to find a way to detect the words, "Fire", "Aqua", "Elec", and "Wood", so I can automatically add styling to them.
Any JavaScript gurus out there to help me?
If you don't care which word is found, you could use a regex like this:
/\bfire|aqua|elec|wood\b/gi
Actually, now that I think about it, I'd still use the same regex (only with capture groups) even if you did care what word you found. You could use javascript and jquery to select sections that have a word and add that word as a class name, thus applying whatever CSS you've defined as associated with that class.
That regex would look like this:
/\b(fire|aqua|elec|wood)\b/gi
The jQuery you'll be looking for will likely be the filter function: http://api.jquery.com/filter/#expr
Once you have those objects, you can apply your styles using jQuery and .addClass: http://api.jquery.com/addClass/
I figured it out!
$(document).ready(function(){
$('div.elemental:contains("Aqua")').addClass('aqua');
$('div.elemental:contains("Fire")').addClass('fire');
$('div.elemental:contains("Wood")').addClass('wood');
$('div.elemental:contains("Elec")').addClass('elec');
});
Now I just need to figure out how create a callback to a new function so that the highlighting is done to each new page I go to.
Related
The question is no more relevent.
I just wanted to add that if anybody encounter a need for filtering HTML, I would propose using a MutationObserver (That was my final choice ..)
Read a bit more on DOM manipulation, it will help. Yes, using content scripts here is the right way to go. You'll want to have your script run at "document_start" which is run before Chrome begins parsing the DOM (that way you'll get a head start, essentially) You could do this filtering a few ways actually;
Just use the DOM as one big string, and remove the words you want. However, this is a messy way of eoing things, if something important was named after your word (like a class, tag name, or whatnot), you'd break the DOM.
Loop over the text nodes (strings) in a DOM as soon as the DOM is ready, and replace and edit those text nodes.
There's tutorials detailing this kind of thing you can find online easily, along the lines of DOM manipulation and text node replacement. This article details it much more intimately and better than I have here: Replacing text in the DOM...solved?
And here is a JS library (from the same guy who wrote that article) which practically does all the hard work for you: https://github.com/padolsey/findAndReplaceDOMText
The way I would approach this is through a jQuery/other framework plugin. I would suggest you take a look at some highlight plugins that are available in pretty much every framework around. See here for some examples of doing highlighting.
Essentially what you'll need to do is select heading tags p tags and spans and loop over each replacing bad words.
I was wondering how one could create something that resembles a textfield, but can contain html elements in it. For example, something like what Stackoverflow uses for tags on its "Ask Question" page. Can this be done this done using a particular plugin/library or does it need to be created from scratch?
I have seen some solutions using the "contenteditable" property, but I am worried about cross browser compatibility. In fact it would appear that the Stackoverflow example does not use this. I have tried searching for info on how to do this but haven't found anything. Would be grateful if someone could point me in the right direction.
You don't need to create it from scratch. Here is the one I use: TinyMCE
You might also find this useful. But you dont need to make a new one. There are a plenty of open source options available.
I'ld like to have a autocomplete function for a textarea but not for the full contents (text). It should work on every word while you're typing.
I add the letters "aut" here just in the middle of the text and it should offer me "autocomplete" (from a predefined/external list of words).
Does something like this exist?
Due to local regulations, I'm limited to Mootools as framework, jQuery is not allowed but any pure JS is fine.
Thank you all.
Have you looked into the MooTools Forge? There you'll find plenty of MooTools based solutions.
The one you're looking for is called Meio.Autocomplete, but there are some other ways of solving this, too.
I have a JS specialty dictionary that find certain keywords on a page and add explanatory tooltips to them. Right now I'm using RegEx to find the keywords, but I suspect it will get slow very soon, when my dictionary grows bigger. I store dictionary entries in an array so I think that can be improved as well. My site language is Vietnamese and my keywords will all be English.
Any idea on improving performance will be much appreciated. Thanks.
You could process your dictionary server side (checks output against keywords), then add a handler to each matched item (a class or other html element to identify the definition to use..). then use javascript to bind each element to your dictionary. This way your server is doing the heavy lifting.
1) Server loads your dictionary file and compares against text you are about to output
2) Where a match is found add
<span class="definition">yourword</span>
3) Generic javascript event handler (this is written in jQuery but of course you can fdo it anyway you like)
$('.definition').mouseOver(function(){
var keyword = $(this).html();
//load your definition using the keyword...
})
See my answer to a related question: javascript: find strings in dom and emphasize it
Also see the accepted answer to that question which is a jQuery plugin to do just what you want.
The problem with doing this with regexp is not speed since some people claim that the DOM parsing method can actually be slower. The problem is avoiding crazy corner casses like: you don't want to replace a javascript string that happens to contain the keyword, you don't want to replace css class name or id that happens to contain the keyword, etc.
In my experience, the DOM way is fast enough. In fact, my website has a list of more than 100 keywords and it manages to install tooltips on all of them in under half a second (certainly faster than my eye can see).
I need to search the text in a HTML document for reg-exes(emails, phone numbers, etc) and words. The matches need to be highlighted and be made anchor-able so that a link can be generated to jump to the location of the matches. So not only does it need to find matches using patterns in needs to do a replace do add the proper html code.
I am currently using jquery but I am not very happy with the speed. In a 1.5mb file it takes about 5 seconds to match 2 regexes and it increases when I add more search criteria.
Does anyone know of a fast method to find regex matches in a large document using javascript?
You say you're "using jQuery" but you don't say how. Have you tried a "highlight" plugin (or, as it sounds like you'd need, a derivation of one)? I've used this one: http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html and it doesn't seem slow to me. Again, you'd have to work on it to make it add the markup you need, but that should be pretty clear - it's not very big.
It seems like what you'd want to do for performance is take your regular expressions and combine them into what amounts to a "token grammar". In other words, you don't want to start from scratch looking for each regex individually throughout the entire document. Instead, you'd want to proceed through it with a regex that matches each possible target (one at a time of course), and each time it finds one you'd replace it with whatever's appropriate. That way you could make just one pass over the document, no matter how big it is and no matter how many patterns you're looking for.
edit Mr. Burkard's plugin doesn't let you search with regexes; it uses "indexOf" internally. Hmm.