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

Discussion in 'Javascript' started by juglesh, Dec 21, 2004.

  1. juglesh

    juglesh Guest

    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.

    --
    thanks,
    juglesh B>{)}
    juglesh, Dec 21, 2004
    #1
    1. Advertising

  2. juglesh

    McKirahan Guest

    "juglesh" <> wrote in message
    news:Sj_xd.302269$R05.120039@attbi_s53...
    > 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.
    >
    > --
    > thanks,
    > juglesh B>{)}
    >
    >


    It is not clear -- who's page?

    For any given URL do you want to change "certain words" and display it or
    what?
    McKirahan, Dec 21, 2004
    #2
    1. Advertising

  3. juglesh

    juglesh Guest

    "McKirahan" <> wrote in message
    news:7C_xd.268087$HA.48168@attbi_s01...
    > "juglesh" <> wrote in message
    > news:Sj_xd.302269$R05.120039@attbi_s53...
    >> 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.
    >>
    >> --
    >> thanks,
    >> juglesh B>{)}
    >>
    >>

    >
    > 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>
    juglesh, Dec 21, 2004
    #3
  4. juglesh

    McKirahan Guest

    "juglesh" <> wrote in message
    news:lZ_xd.689446$mD.299515@attbi_s02...
    >
    > "McKirahan" <> wrote in message
    > news:7C_xd.268087$HA.48168@attbi_s01...
    > > "juglesh" <> wrote in message
    > > news:Sj_xd.302269$R05.120039@attbi_s53...
    > >> 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.
    > >>
    > >> --
    > >> thanks,
    > >> juglesh B>{)}
    > >>
    > >>

    > >
    > > 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>
    >


    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()">
    McKirahan, Dec 21, 2004
    #4
  5. juglesh

    McKirahan Guest

    make that:

    var find = "blah";
    McKirahan, Dec 21, 2004
    #5
  6. juglesh

    juglesh Guest

    "McKirahan" <> wrote in message
    news:Wd0yd.540796$wV.495762@attbi_s54...
    > "juglesh" <> wrote in message
    > news:lZ_xd.689446$mD.299515@attbi_s02...
    >>
    >> "McKirahan" <> wrote in message
    >> news:7C_xd.268087$HA.48168@attbi_s01...
    >> > "juglesh" <> wrote in message
    >> > news:Sj_xd.302269$R05.120039@attbi_s53...
    >> >> 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.
    >> >>
    >> >> --
    >> >> thanks,
    >> >> juglesh B>{)}
    >> >>
    >> >>
    >> >
    >> > 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>
    >>

    >
    > 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.
    juglesh, Dec 21, 2004
    #6
  7. juglesh

    juglesh Guest

    "juglesh" <> wrote in message
    news:Lf1yd.612732$D%.496186@attbi_s51...
    >
    > "McKirahan" <> wrote in message
    > news:Wd0yd.540796$wV.495762@attbi_s54...
    >> "juglesh" <> wrote in message
    >> news:lZ_xd.689446$mD.299515@attbi_s02...
    >>>
    >>> "McKirahan" <> wrote in message
    >>> news:7C_xd.268087$HA.48168@attbi_s01...
    >>> > "juglesh" <> wrote in message
    >>> > news:Sj_xd.302269$R05.120039@attbi_s53...
    >>> >> 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.
    >>> >>
    >>> >> --
    >>> >> thanks,
    >>> >> juglesh B>{)}
    >>> >>
    >>> >>
    >>> >
    >>> > 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>
    >>>

    >>
    >> 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.


    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.
    juglesh, Dec 21, 2004
    #7
  8. juglesh

    RobB Guest

    juglesh wrote:
    > 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.
    >
    > --
    > thanks,
    > juglesh B>{)}

    Maybe...

    http://www.alistapart.com/articles/dynatext/
    RobB, Dec 22, 2004
    #8
  9. juglesh

    McKirahan Guest

    "juglesh" <> wrote in message
    news:cP1yd.303759$R05.64258@attbi_s53...

    [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.
    McKirahan, Dec 22, 2004
    #9
  10. OT: Re: replace instances of text on page with image or other text?

    "juglesh" <> wrote:

    > 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"

    :)
    Martin Bialasinski, Dec 22, 2004
    #10
  11. juglesh

    juglesh Guest

    "McKirahan" <> wrote in message
    news:Xr4yd.304544$R05.275437@attbi_s53...
    > "juglesh" <> wrote in message
    > news:cP1yd.303759$R05.64258@attbi_s53...
    >
    > [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,
    juglesh, Dec 23, 2004
    #11
  12. juglesh

    McKirahan Guest

    "juglesh" <> wrote in message
    news:F6Eyd.5255$k25.1585@attbi_s53...

    [snip]

    > > "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,


    "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()">
    McKirahan, Dec 23, 2004
    #12
  13. juglesh

    juglesh Guest

    "McKirahan" <> wrote
    >
    > 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.

    --

    juglesh
    juglesh, Dec 25, 2004
    #13
  14. juglesh

    McKirahan Guest

    "juglesh" <> wrote in message
    news:Tf7zd.630520$D%.101935@attbi_s51...

    [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.
    >
    > --
    >
    > juglesh
    >

    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.
    McKirahan, Dec 26, 2004
    #14
  15. juglesh

    juglesh Guest

    "McKirahan" <> wrote in message
    news:0qCzd.19336$k25.3159@attbi_s53...
    > "juglesh" <> wrote in message
    > news:Tf7zd.630520$D%.101935@attbi_s51...
    >
    > [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.
    >>
    >> --
    >>
    >> juglesh
    >>

    > 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).

    --
    juglesh
    juglesh, Dec 26, 2004
    #15
  16. juglesh

    McKirahan Guest

    "juglesh" <> wrote in message
    news:6LGzd.261461$V41.16042@attbi_s52...

    [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.


    > 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).
    >
    > --
    > juglesh
    >
    >
    McKirahan, Dec 27, 2004
    #16
  17. juglesh

    juglesh Guest

    "McKirahan" <> wrote in message
    news:qOKzd.812226$8_6.276494@attbi_s04...
    > "juglesh" <> wrote in message
    > news:6LGzd.261461$V41.16042@attbi_s52...
    >
    > [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.
    juglesh, Dec 27, 2004
    #17
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Tom Cross
    Replies:
    1
    Views:
    326
    Terry Reedy
    Aug 16, 2003
  2. John Wohlbier
    Replies:
    2
    Views:
    357
    Josiah Carlson
    Feb 22, 2004
  3. Replies:
    8
    Views:
    445
    James Stroud
    Jan 29, 2009
  4. mscir
    Replies:
    0
    Views:
    298
    mscir
    Oct 12, 2005
  5. Replies:
    17
    Views:
    296
    Thomas 'PointedEars' Lahn
    Dec 9, 2006
Loading...

Share This Page