CODEWITHSUNDEEP
javascriptjquery
Chaz
Chaz

Reputation: 233

Word Replacement with jquery

Thanks in advance for the help.

I have been fooling around with browser extensions (a novice) and I have been trying to figure out some word swapping issues; specifically, I am trying to do something akin to a rebus.

I tested my code out on just a plain text page, and it works. But then, when making it an extension, it basically loses the styling on the page and turns it into text only.

I have been looking for a more unobtrusive way to swap a word like "shoe" with an image of a shoe. I have been working in jQuery and using the documentation to make what I already did below. 

$(document).ready(function () {
    var newText = $("body").text().split(" "); 
    $.each(newText, function(index, value) {
        if (newText[index] === "shoe") {
            newText[index] = "<img src='http://.../shoe.png' alt='shoe'>";
        }
    });
    var altText = newText.join("</span> <span>");
    $("body").html(altText);
});

I see what I am doing: ripping the text out and then shoving back in. But I am at a loss of what I should use.

I am aware of the replaceWith() function and I suppose that is the right one to use. But how do I get to the "shoe" words in the first place?

Thanks

Upvotes: 2

Views: 819

Answers (4)

Jeff B
Jeff B

Reputation: 30099

I don't know if jQuery helps a lot here. You are best off probably just doing a replace on the full html... with some (potentially bad) notes and caveats.

1) Ideally, you would only use text() via jQuery, but after you have the text, you have no easy way of putting it back. this is <span>my</span> dog => this is my <img src="dog.jpg">.. losing your span.

2) Replacing on the full html would be bad if your html tags contain the words you are replacing!! <div id="dog"> => <div id="<img src="dog.jpg">"> Ugh!

3) Use word boundary delimiters \bshoe\b in your regular expression to match on whole words only to prevent: catastrophe => <img src="cat.jpg">astrophe

Example: http://jsfiddle.net/jtbowden/7cajW/

BETTER:

I coded a better solution, using lower-level code based on jquery.highlight.

http://jsfiddle.net/jtbowden/jRebk/3/

It adds a function prototype for .rebus(wordMap, [caseSensitive], [useWordBoundaries]), where the defaults are false and true, respectively, for the latter two.

Usage:

var myRebus = {
    "shoe": "http://i54.tinypic.com/254zjgy.png",
    "hat" : "http://i55.tinypic.com/11iicgg.png",
    "dog" : "http://i55.tinypic.com/287p11k.png",
};

$('body').rebus(myRebus);

Upvotes: 3

Flavio CF Oliveira
Flavio CF Oliveira

Reputation: 5285

is this way valid for you?:

$(function(){
    var sHtmlText = $('body').html();
    sHtmlText = sHtmlText.replace(/shoe/g, "<img src='http://.../shoe.png' alt='shoe'>");
    $('body').html(sHtmlText);
})

Explain: just get the full raw html in a string variable, and apply directly the replace statement and put the correct string again on body tag. i think that you dont need to split and iterate all the possible words in the html.

if you can do this dynamically on the server side, i think that is better and you could prevent some kind of plage flicking or strage behaviours on this way!!

Upvotes: 0

Ken Redler
Ken Redler

Reputation: 23943

One option is to look into customizing this text highlighting plug-in. The source code is actually pretty simple. Take a look at this section:

// --- snip ---
var spannode = document.createElement('span');
spannode.className = 'highlight';
var middlebit = node.splitText(pos);
var endbit = middlebit.splitText(pat.length);
var middleclone = middlebit.cloneNode(true);
spannode.appendChild(middleclone);
middlebit.parentNode.replaceChild(spannode, middlebit);
// --- snip ---

The code creates a new span element, takes the matched string, inserts it into the new span, then replaces the original matched string with the new span element.

For your situation, instead of creating a <span>, create an <img>. And instead of adding back in the found string, look up the appropriate image URL in a map of your own construction. So you'd have something like this:

var rebus = {
  shoe : '/images/shoe.jpg',
  sock : '/images/sock.jpg',
  spats : '/images/spats.jpg'
}

And in the code, before the appendChild line, you'd have something like this:

var middleclone = rebus[ middleclone.data.toLowerCase() ];

This is all from a quick skim of the code, and untested, but it seems like you should be able to strip out the highlighting pieces and drop in some substitution code.

Upvotes: 1

Andy
Andy

Reputation: 30135

I don't know if this would work as extension but i'd try it that way:
http://jsfiddle.net/wSCAx/

var b = document.body;
var t = b.innerHTML;
b.innerHTML = t.replace(/shoe/g,'<img src=""/>');

Upvotes: 0

Related Questions