replace instances of text on page with image or other text?

J

juglesh

Hello,

I need to look through the text on a page and replace certain words with an
image or other word

something like:

read document
find all instances of the word "blah"
change all instances of the word "blah" to <img src="MyPicture.jpg" >


(jeez, I don't get why computers cant just read english!<G>)
and, no, I cant just change the page with 'find/replace' in notepad.
 
M

McKirahan

juglesh said:
Hello,

I need to look through the text on a page and replace certain words with an
image or other word

something like:

read document
find all instances of the word "blah"
change all instances of the word "blah" to <img src="MyPicture.jpg" >


(jeez, I don't get why computers cant just read english!<G>)
and, no, I cant just change the page with 'find/replace' in notepad.

It is not clear -- who's page?

For any given URL do you want to change "certain words" and display it or
what?
 
J

juglesh

McKirahan said:
It is not clear -- who's page?

well, my .php is being included in their page(which they made for me) . my
..php page contains the head and the body tag, so i can put in a javascript,
and call it from body onload. basically, when it gets to your browser, you
see my head content, and most of the body is theirs.
For any given URL do you want to change "certain words" and display it or
what?

so, not any given url, just on the pages where my head content is used.

their page is:
<?php include 'http://www.mydomain.com/head.php'; ?>
<p> Welcome. Content is here. blah and blah</p>
</body>

my head.php is
<head>
<my javascript>
</head>
<body>

i want my js to change all instances of 'blah' to <img src="MyPicture.jpg" >

which would change the output to:
Welcome. Content is here. <the image> and <the image>
 
M

McKirahan

juglesh said:
well, my .php is being included in their page(which they made for me) . my
.php page contains the head and the body tag, so i can put in a javascript,
and call it from body onload. basically, when it gets to your browser, you
see my head content, and most of the body is theirs.


so, not any given url, just on the pages where my head content is used.

their page is:
<?php include 'http://www.mydomain.com/head.php'; ?>
<p> Welcome. Content is here. blah and blah</p>
</body>

my head.php is
<head>
<my javascript>
</head>
<body>

i want my js to change all instances of 'blah' to <img src="MyPicture.jpg"


which would change the output to:
Welcome. Content is here. <the image> and <the image>

Will this work? Watch for word-wrap.

<head>
<script type="text/javascript">
function MyHead() {
var find = "blah and blah";
var repl = "<img src='MyPicture.jpg'>";
var page = document.body.innerHTML;
while (page.indexOf(find) >= 0) {
var i = page.indexOf(find);
var j = find.length;
page = page.substr(0,i) + repl + page.substr(i+j);
document.body.innerHTML = page;
}
}
</script>
</head>
<body onload="MyHead()">
 
J

juglesh

McKirahan said:
Will this work? Watch for word-wrap.

<head>
<script type="text/javascript">
function MyHead() {
var find = "blah and blah";
var repl = "<img src='MyPicture.jpg'>";
var page = document.body.innerHTML;
while (page.indexOf(find) >= 0) {
var i = page.indexOf(find);
var j = find.length;
page = page.substr(0,i) + repl + page.substr(i+j);
document.body.innerHTML = page;
}
}
</script>
</head>
<body onload="MyHead()">

almost works! if i change repl to a different word, it will work (it will
display another word), but if i use that img tag, nothing changes.
 
J

juglesh

juglesh said:
almost works! if i change repl to a different word, it will work (it will
display another word), but if i use that img tag, nothing changes.

ahh, think i got it! i had to change my quotes in the img tag to single
quotes.

is find a special variable? if i wanted to find and replace some other
words, how could i do that without making a bunch more functions?

thank you very much.
 
R

RobB

juglesh said:
Hello,

I need to look through the text on a page and replace certain words with an
image or other word

something like:

read document
find all instances of the word "blah"
change all instances of the word "blah" to <img src="MyPicture.jpg" >


(jeez, I don't get why computers cant just read english!<G>)
and, no, I cant just change the page with 'find/replace' in notepad.
Maybe...

http://www.alistapart.com/articles/dynatext/
 
M

McKirahan

[snip]
ahh, think i got it! i had to change my quotes in the img tag to single
quotes.

is find a special variable? if i wanted to find and replace some other
words, how could i do that without making a bunch more functions?

thank you very much.


"var find" and "var repl" are just variable names.
 
M

Martin Bialasinski

juglesh said:
read document
find all instances of the word "blah"
change all instances of the word "blah" to <img src="MyPicture.jpg" >

(jeez, I don't get why computers cant just read english!<G>)

Well, it nearly looks like Applescript, which has a syntax like

tell application "Finder" to set x to entire contents of folder
"Macintosh HD:System Folder"

:)
 
J

juglesh

McKirahan said:
[snip]
ahh, think I got it! I had to change my quotes in the img tag to single
quotes.

is find a special variable? if I wanted to find and replace some other
words, how could I do that without making a bunch more functions?

thank you very much.


"var find" and "var repl" are just variable names.

yeah, ok, dreamweaver colors 'find' a different color, so I was thinking
that some special variable name or something.

well, I got it to work replacing 2 different words with two different
images, but only by duplicating the function (and adding a 2 to all the
variables). but I cant seem to do multiple replaces within the same
function. It seems like if I want to do 4 or 5 of these, its gonna get a
bit too much code if it could be done in one function.

thanks,
 
M

McKirahan

[snip]
yeah, ok, dreamweaver colors 'find' a different color, so I was thinking
that some special variable name or something.

well, I got it to work replacing 2 different words with two different
images, but only by duplicating the function (and adding a 2 to all the
variables). but I cant seem to do multiple replaces within the same
function. It seems like if I want to do 4 or 5 of these, its gonna get a
bit too much code if it could be done in one function.

thanks,

"find" is probably a reserved word in some language.

The version below handles multiple find/repl:

<head>
<script type="text/javascript">
function MyHead() {
var list = new Array();
list[0] = "blah1^<img src='MyPicture1.jpg'>";
list[1] = "blah2^<img src='MyPicture2.jpg'>";
list[2] = "blah3^<img src='MyPicture3.jpg'>";
var j, k, find, item, page, repl;
for (var i=0; i<list.length; i++) {
item = list.split("^");
find = item[0];
repl = item[1];
page = document.body.innerHTML;
while (page.indexOf(find) >= 0) {
var j = page.indexOf(find);
var k = find.length;
page = page.substr(0,j) + repl + page.substr(j+k);
document.body.innerHTML = page;
}
}
}
</script>
</head>
<body onload="MyHead()">
 
J

juglesh

McKirahan said:
The version below handles multiple find/repl:

<head>
<script type="text/javascript">
function MyHead() {
var list = new Array();
list[0] = "blah1^<img src='MyPicture1.jpg'>";
list[1] = "blah2^<img src='MyPicture2.jpg'>";
list[2] = "blah3^<img src='MyPicture3.jpg'>";
var j, k, find, item, page, repl;
for (var i=0; i<list.length; i++) {
item = list.split("^");
find = item[0];
repl = item[1];
page = document.body.innerHTML;
while (page.indexOf(find) >= 0) {
var j = page.indexOf(find);
var k = find.length;
page = page.substr(0,j) + repl + page.substr(j+k);
document.body.innerHTML = page;
}
}
}
</script>
</head>
<body onload="MyHead()">


thank you very much, this is perfect!!! One hint, don't try naming your
images the same as the word you are trying to replace<G> (blah1.gif-doesn't
work). throws IE into a tailspin.

seems to run fast enough on my puter(xp, 2.8ghz, 512ram), do you think it
would be a problem on a lesser machine? at what point, x number of replaced
words, or x number of instances of the words in the page, would it be a
problem? I ask cuz it seems to me that we are storing the
document.body.innerHTML a lot. seems a lot of stuff to have in memory and
be looking thru multiple times, but I don't really know.
 
M

McKirahan

[snip]
thank you very much, this is perfect!!! One hint, don't try naming your
images the same as the word you are trying to replace<G> (blah1.gif-doesn't
work). throws IE into a tailspin.

seems to run fast enough on my puter(xp, 2.8ghz, 512ram), do you think it
would be a problem on a lesser machine? at what point, x number of replaced
words, or x number of instances of the words in the page, would it be a
problem? I ask cuz it seems to me that we are storing the
document.body.innerHTML a lot. seems a lot of stuff to have in memory and
be looking thru multiple times, but I don't really know.
Then let's only use it once:

<head>
<script type="text/javascript">
function MyHead() {
var list = new Array();
list[0] = "blah1^<img src='MyPicture1.jpg'>";
list[1] = "blah2^<img src='MyPicture2.jpg'>";
list[2] = "blah3^<img src='MyPicture3.jpg'>";
var j, k, find, item, repl;
var page = document.body.innerHTML;
for (var i=0; i<list.length; i++) {
item = list.split("^");
find = item[0];
repl = item[1];
page = document.body.innerHTML;
while (page.indexOf(find) >= 0) {
var j = page.indexOf(find);
var k = find.length;
page = page.substr(0,j) + repl + page.substr(j+k);
}
}
document.body.innerHTML = page;
}
</script>
</head>
<body onload="MyHead()">

Also, I'd suggest that instead of using "blah" use a tag-like reference such
as [blah] si it will stand out more and can't be confused with an image
name.
 
J

juglesh

McKirahan said:
[snip]
thank you very much, this is perfect!!! One hint, don't try naming your
images the same as the word you are trying to replace<G> (blah1.gif-doesn't
work). throws IE into a tailspin.

seems to run fast enough on my puter(xp, 2.8ghz, 512ram), do you think it
would be a problem on a lesser machine? at what point, x number of replaced
words, or x number of instances of the words in the page, would it be a
problem? I ask cuz it seems to me that we are storing the
document.body.innerHTML a lot. seems a lot of stuff to have in memory and
be looking thru multiple times, but I don't really know.
Then let's only use it once:

<head>
<script type="text/javascript">
function MyHead() {
var list = new Array();
list[0] = "blah1^<img src='MyPicture1.jpg'>";
list[1] = "blah2^<img src='MyPicture2.jpg'>";
list[2] = "blah3^<img src='MyPicture3.jpg'>";
var j, k, find, item, repl;
var page = document.body.innerHTML;
for (var i=0; i<list.length; i++) {
item = list.split("^");
find = item[0];
repl = item[1];
page = document.body.innerHTML;
while (page.indexOf(find) >= 0) {
var j = page.indexOf(find);
var k = find.length;
page = page.substr(0,j) + repl + page.substr(j+k);
}
}
document.body.innerHTML = page;
}
</script>
</head>
<body onload="MyHead()">

Also, I'd suggest that instead of using "blah" use a tag-like reference
such
as [blah] si it will stand out more and can't be confused with an image
name.


this last one isnt working here. only the third item is replaced.

I sorta see where you're going, though. you only do the
document.body.innerHTML = page at the end, and not through every for/while
loop? as you may have guessed, I'm just a copy/paste javascripter, I get
most of it, and if I squint at the code for long enough while flipping
through javascript references online, I can grok a bit more.

afa [blah] , do you mean that I should have the text to be replaced in the
html changed to bracketed? because that's why I'm going through all this in
the first place, I cant change most of the body of the page (well, not
without js).
 
M

McKirahan

[snip]

Remove the instance of
page = document.body.innerHTML;
just before the "while" statement.

I just meant that if you had control obver the page it would be nice to more
clearly identify replacable elements.
 
J

juglesh

McKirahan said:
[snip]

Remove the instance of
page = document.body.innerHTML;
just before the "while" statement.
cool.

I just meant that if you had control obver the page it would be nice to
more
clearly identify replacable elements.

true, dat. I'm trying to get them to call my replaceElements.php so i can
just put some urls to my images where i need them.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,480
Members
44,900
Latest member
Nell636132

Latest Threads

Top