SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question In-page currency conversion with javascript

    I have one page with currency in usd, like $42. I want to set a variable in JavaScript like var euro = n, then to find all currency occurrences in usd on the page, and replace them with their euro equivalent. $42 would become 29.9 euros when the script is called.

    Could you point me towards a guide on how to do this, or any snippets of code whatsoever? Thank you.

  2. #2
    SitePoint Evangelist bals28mjk's Avatar
    Join Date
    Aug 2007
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey.

    I would grab the body text with innerHTML, use a regular expression to find occurrences of the dollar currency, run the euro function, and replace the text.

    Hope that helps Buguletzu, cheers.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Javascript really is not the way that currency should be converted, because when javsacript is not available, any type of conversion will not be able to occur.

    A server-side language script like php or asp is normally the way the such behaviour occurs.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want to make a greasemonkey script, so javascript is the only way to do it.

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    That gets interesting then because if you have the values in a span, called dollar for example, you can use the lang attribute to specify that it's american.

    No hang on, while it's possible to use lang="en-US" there is no equivalent for euros. A series of class names will need to be used instead.

    Code javascript:
    <span class="USD">42</span>

    You could then have the script look for such known class names throughout the page, and apply the appropriate formatting.

    Code javascript:
    <span class="USD">$42</span>

    When it comes time to convert to some other currency, you can apply an appropriate exchange rate. You know that it's coming from US and having selected euros the appropriate exchange rate can be used to end up with:

    Code javascript:
    <span class="EUR">29.9 Euros</span>

    That side of things is fairly straight forward. You can use getElementsByClassName, and make use some compatibility code at http://www.quirksmode.org/blog/archi...mentsbycl.html so that the browser implementation is used where possible before using some other custom code version.

    So that takes care of finding things. You can have an array that lists the supported dollar formats, and the exchange rate to and from the US dollar so that conversions can occur from Euros to Yen if need be.

    • for each currency type in the array
    • find all currencies of that type on the page
    • for each currency found, convert it from itself back to itself, to achieve proper formatting


    Then, when you select say, "Convert all to Euro", you can do the same as above but convert it from itself to the target currency

    There's still one big problem though. In fact, it's the elephant that's standing in the room here with you.
    How will you update the appropriate exchange rates? These change over a period of time so you can't page those programatically stored with the script, or the conversion will rapidly become wrong.

    What do you plan to do about the exchange rates?
    Last edited by paul_wilkins; Dec 23, 2008 at 10:54.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    //You can replace any textNode data containing a dollar sign followed by some digits:
    Code:
    function $toEuros(txtnode, xchange){
    	var s= txtnode.data;
    	xchange= xchange || 1.394
    	var Rx= /\$(\d+(\.\d+)?)/g
    	txtnode.data= s.replace(Rx, function(w){
    		return (w.substring(1)*xchange).toFixed(2)+' euros';
    	})
    }
    // any method that recurses through the document will do to feed the replace function with text nodes.


    Code:
    function deepText(hoo, fun, arg){
    	var A= [], tem;
    	if(hoo){
    		hoo= hoo.firstChild;
    		while(hoo!= null){
    			if(hoo.nodeType== 3){
    				if(fun){
    					if((tem= fun(hoo, arg)) !== undefined) A[A.length]= tem;
    				} 
    				else A[A.length]= hoo;
    			} 
    			else A= A.concat(Run.deepText(hoo, fun, arg));
    			hoo= hoo.nextSibling;
    		}
    	}
    	return A;
    }
    deepText(document.body, $toEuros, 1.394)

    You probably would make both of these functions methods of some object in your script, rather than globals.
    Last edited by mrhoo; Dec 23, 2008 at 09:43.

  7. #7
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very very much!


Tags for this Thread

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
  •