Question

Does anyone know how to do replace multiple text by clicking a button with jQuery?

I’ve built a website that displays some text/data eg; “£100.00”, but I what I need is to be able to ‘replace’ those monetary values with “£XXX.XX” with a ‘Hide’ button like you get on some banking websites. For example one web page has:

£100.00, £200.00, £130.00 etc etc..

…so when a user presses the Hide button, all of the numbers on the page turn to £XXX.XX. Ideally, the button should then display “Show” instead of “Hide” and switch back when toggled.

This is for a static dummy site, so no data base.

I suspect this is best handled with jQuery?

Thanks for your time,

D.

Answer 1

Case 1: Controlled Input

Assuming you can at least wrap all monetary values with something like this:

<span class="money-value">£200.00</span>
<span class="money-value">£300.50</span>

And that you can add button declared with:

<button id="secret-button">hide</button>

Then you could have some jQuery code doing this:

/**
 * Simple search and replace version.
 */
$(function() {
  $("#secret-button").click(function() {
    $(".money-value").html($(".money-value").html().replace(/[0-9]/g,"X"));
  });
});​

or a more advanced one with:

/**
 * Complet version.
 *
 * 1) on button click, if asking to hide:
 * 1.1) iterate over all entries, save their text, and replace it with markers
 * 1.2) toggle the button's text to "show"
 * 2) on button click, if asking to show:
 * 2.1) iterate over all entries, restore previous text
 * 2.2) clear the hidden store
 * 2.3) toggle the button's text to "hide"
 */
$(function() {
  var hiddenStore = [];

  $("#secret-button").click(function() {
      if ($(this).html() == "hide") {
        $(".money-value").each(function () {
           var text = $(this).html();

           hiddenStore.push(text);
           $(this).html(text.replace(/[0-9]/g,"X"));
        });
        $(this).html("show");
      } else {
        $(".money-value").each(function (i) {
           var text = hiddenStore[i];

           $(this).html(text);
        });
        hiddenStore = [];
        $(this).html("hide");          
      }
  });
});​

Complete solution is here: See here: http://jsfiddle.net/u79FV/

Notes:

• this won’t work for input field values
• this assumes your text entries have been marked as shown above
• Does what you want with the button’s changing state.
• Saves the values and puts them back.
• Meant to work even if new fields are added dynamically.
• Shankar Sangoli‘s answer uses a different way of saving the stored data, which you could as well consider (using the jQuery .data() method).
• you may want to switch the button to an <input type="button" /> tag, in which case you’d use .val() instead of .html() to toggle its text.

Case 2: Uncontrolled Input

Assuming you don’t have control over where the values may show up, then you need to do something a bit more complicated, which is to look in the whole page for something that would look like a currency format. I’d advise against it.

But, the jQuery Highlight plugin could be something to look at, as its code does something similar (in that it searches for pieces of code to modify), and you could then reuse some of solution 1 to make it fit your purpose.

That would be harder to design in a fool-proof fashion though.