SitePoint Sponsor

User Tag List

Results 1 to 17 of 17

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to replace text on a page?

    Hello!


    Is there any way I can replace text dynamically on a page using Javascript?

    Caveat: I don't want to use div or span nodes, instead I want to target a text string and change that.

    E.g., given the following HTML:

    <h1>Hello {name}</h1>


    I want to do the following replacement:
    replace {name} with "World".


    Possible at all?

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <h1 id="h1_1">Hello {name}</h1>
    var who=document.getElementById('h1_1').childNodes[0};
    var str=who.data;
    str=str.replace('{name}','World');
    who.data=str;

  3. #3
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if there is a pattern you can use regExp

  4. #4
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And if I don't know where the text is on the page? I just want to replace {name} with "World" anywhere on the page.

    Is there a way I can iterate through all the text nodes in the page?

  5. #5
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You would be better of using a server side language such as php to do this as Javascript can be turned off, and then your text will not be changed, so it depends how important the search is.
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"

  6. #6
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by herbasher View Post
    And if I don't know where the text is on the page? I just want to replace {name} with "World" anywhere on the page.
    Code:
    document.body.innerHTML = 
        document.body.innerHTML.replace(foo, bar)

  7. #7
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    mrhoo, what is that 'data' bit for? I tried looking on google, but using the word data it is somewhat near impossible to find something sepcific.

  8. #8
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah I know about PHP, but I'm creating an experimental prototype project, and I need to do it with JS

  9. #9
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe try ask google this search query "highlight search result javascript". I think it could help you.

  10. #10
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good idea! Yeah helps, should get me going.

  11. #11
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    An element has childNodes which may be other elements or text nodes,
    a textNode has a data (or value) attribute that is the text in the node.
    To replace every occurence of a string of text on a page you have to examine every text node of every element on the page.

    to swap the string Str on a page with newStr, call something like this:

    swapText(document.body,Str,newStr)

    Code:
    function swapText(hoo,Str,newStr){
    	if(!hoo) return;
    	if(hoo.nodeType==3) hoo.data= hoo.data.replace(Str,newStr) 
    	else if(hoo.hasChildNodes()){
    		var pa=hoo.childNodes;
    		var L= pa.length;
    		for(var i=0;i<L;i++){
    			var tem=pa[i];
    			var T=tem.nodeType;
    			if(T==3 && /\w+/.test(tem.data)) tem.data=tem.data.replace(Str,newStr) 
    			else if(T==1) swapText(tem,Str,newStr);
    		}
    	}
    }
    To replace upper and lower case matches you can make the argument Str a regular expression:
    /\b(yourstring)\b/ig and use a function in replace() to return the new text in the proper case.

  12. #12
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Nice script, mrhoo. I still don't get why you have to do
    Code:
    hoo.data= hoo.data.replace(Str,newStr)
    and not
    Code:
    hoo= hoo.replace(Str,newStr)

  13. #13
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hoo is an object, a textNode in this case. hoo is not the text, but the 'thing' that contains the text. hoo has properties-
    parentNode, nodeType, nodeName ,previousSibling, etc., and one of it's properties is data.

    data is the text content of a text node object.
    It is a synonym for 'value', and either can be used, but data is specific to text nodes.
    You need to get text as a string to use the String replace method.Calling replace on hoo returns an error.

  14. #14
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I see now, same thing as nodeValue. Cheers.

  15. #15
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    document.body.innerHTML =
    document.body.innerHTML.replace(foo, bar)
    The trouble with this approach is that it will also replace the text in any attributes on the page, including URLs and ids. I'm all for doing things the easy way, but not in a search and replace operation.

  16. #16
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's very unlikely OP uses "{name}" or similar within tags.
    In more general case, this is easy to avoid by using lookaround in regexp.

  17. #17
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's very friendly of you mrhoo, thanks for the great script.


    Thank you very much everyone, this really helped me.
    Last edited by herbasher; Jan 11, 2007 at 17:57.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •