Comments on: Highlighting text with JavaScript https://j11y.io/snippets/highlighting-text-with-javascript/ Sun, 22 Mar 2015 15:39:22 +0000 hourly 1 https://wordpress.org/?v=5.0.13 By: Baki https://j11y.io/snippets/highlighting-text-with-javascript/#comment-371 Mon, 14 Sep 2009 10:47:53 +0000 https://j11y.io/?p=343#comment-371 Hi

I want to search for style=”color:#0000FF;” in the source code and replace it with class=”0000FF”

Is this possible to do.

Thanks

]]>
By: James https://j11y.io/snippets/highlighting-text-with-javascript/#comment-370 Sat, 03 Jan 2009 21:33:53 +0000 https://j11y.io/?p=343#comment-370 Wow Robert! Awesome stuff! My regex attempt was just for a little bit of fun, and to learn a bit, I didn’t think it was a particularly solid implementation. Yours looks superb, thanks for commenting! 🙂

]]>
By: Robert Samuel Clay https://j11y.io/snippets/highlighting-text-with-javascript/#comment-369 Sat, 03 Jan 2009 18:42:04 +0000 https://j11y.io/?p=343#comment-369 Of course, that textNodes refers to this:

        var textNodes = $(selector).textNodes();

This is how you extract all of the textNodes in a container into a simple array.

]]>
By: Robert Samuel Clay https://j11y.io/snippets/highlighting-text-with-javascript/#comment-368 Sat, 03 Jan 2009 18:40:34 +0000 https://j11y.io/?p=343#comment-368 James,

A worthy idea, but there are always edge cases that either don’t work, or are a bit finicky with regular expressions. Having recently written a highlighting script, ensured to work across all A-grade browsers (yup, that includes IE6), there is only one perfect way to accomplish this without poking around in the dark for those edge cases.

Walk the DOM tree looking for textNodes, then using doing a simple indexOf on the content of a textNode. jQuery makes this obscenely easy:

 
(function($) { // main code
	$.textNode = function(s) {return $(document.createTextNode(s))};
	// create a $ containing a single textNode, very useful for appendTo()
 
	$.fn.extend({
		textNodes: function(deep) { // requires an ender
		// return the text noded under a dom node, either deep or shallow (one level down)
			var texts=[];
			this.each(function(){
				var children =this.childNodes;
				for (var i = 0; i < children.length; i++){
					var child = children[i];
					if (child.nodeType == 3 && child.parentNode.nodeName.toLowerCase().indexOf('script') == -1) {
						texts.push(child);
					}
					else if (deep && child.nodeType == 1)
						[].push.apply(texts,$(child).textNodes(deep,true));
				}
			});
            // DAYLIFE.log(['textNodes', this, arguments[1]]);
			return arguments[1] ? texts: this.pushStack(texts);
		}
	})
})(jQuery);

Then use this .textNodes method on containers:

var self=this;
textNodes.each(function() {
    if (!found) {
        if (self.invalid_tag(this.parentNode)) return;
        var textnode_text = this.data;
        var topic_loc = textnode_text.indexOf(topic_alias);
        while (topic_loc != -1) {
            //DAYLIFE.log(['Analyzing match', textnode_text.substr(topic_loc+topic_alias.length, 1).search(/[.,?!)]:;<s]/)]);
            if (self.is_valid_topic_terminator(textnode_text, topic_loc, topic_alias)) {
                topic_loc = textnode_text.indexOf(topic_alias, topic_loc+topic_alias.length);
                continue;
            }
            // DAYLIFE.log(['Found good match', topic_alias, topic_loc, topic_alias.length]);
            before = document.createTextNode(textnode_text.substring(0, topic_loc));
            after = document.createTextNode(textnode_text.substring(topic_loc+topic_alias.length));
            original = textnode_text;
            $(this).before($(before));
            $(this).after($(after));
            $(this).before(wrap_topic(topic, topic_alias));
            this.parentNode.removeChild(this);
            found = true;
            return;
        }
    } 
});

You’ll have to fill in the gaps for some of those external methods and variables (like found and wrap_topic, but a it should not be difficult to do this.

]]>
By: Ibrahim https://j11y.io/snippets/highlighting-text-with-javascript/#comment-367 Sat, 03 Jan 2009 17:27:48 +0000 https://j11y.io/?p=343#comment-367 Cool thanks 🙂

]]>
By: Farrhad A on Twitter https://j11y.io/snippets/highlighting-text-with-javascript/#comment-366 Sat, 03 Jan 2009 12:41:15 +0000 https://j11y.io/?p=343#comment-366 Nice tip 🙂
Will keep it in mind.

]]>