Replacing value in data-bind in HTML without losing events

Question

To increase usability on a website I want to change the following with Greasemonkey (JavaScript) :

data-bind="text: 'Price: ' + db.totalpr().toFixed(2) + ' GBP'"`

to

data-bind="text: 'Price: ' + db.totalpr().toFixed(2)*current_exchange_rate + ' USD'"`

Had tried

document.body.innerHTML = document.body.innerHTML.replace(text_to_find, text_to_replace)

but a page loses events and no data is being loaded: "Price" loads nothing and stays empty.

Then I've found this: Replace text in a website

function replaceTextOnPage(from, to){
  getAllTextNodes().forEach(function(node){
    node.nodeValue = node.nodeValue.replace(new RegExp(quote(from), 'g'), to);
  });

  function getAllTextNodes(){
    var result = [];

    (function scanSubTree(node){
      if(node.childNodes.length) 
        for(var i = 0; i < node.childNodes.length; i++) 
          scanSubTree(node.childNodes[i]);
      else if(node.nodeType == Node.TEXT_NODE) 
        result.push(node);
    })(document);

    return result;
  }

  function quote(str){
    return (str+'').replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1");
  }
}

But, unfortunately, it's not working in my case: it can replace "Price" to any text I want but not the

db.totalpr().toFixed(2)

to

"db.totalpr().toFixed(2)*current_exchange_rate"

Any ideas how to make it work without losing events?

Update:

<div class="row">
    <div class="col-md-5">
        <h5 data-bind="text: 'Price: ' + db.totalpr().toFixed(2) + ' GBP'" style="margin-left:7px"></h5>
    </div>
</div>

Answer 1

This looks line an "X Y problem". See below the fold...

---

The question implies replacing attributes, not text. (And, just the attributes so that you don't break that ajax-driven page.)

Since it's ajax-driven, you need something like MutationObserver or waitForKeyElements.

Here's a script that shows how to replace those kinds of attributes:

// ==UserScript==
// @name     _Dynamically replace JS-coded attributes
// @match    *://YOUR_SERVER.COM/YOUR_PATH/*
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// @grant    GM.openInTab 
// ==/UserScript==
//- The @grant directives are needed to restore the proper sandbox.

var current_exchange_rate = 1.41;  //  Hard coded for demo purposes only.

waitForKeyElements ("[data-bind]", ReplacePriceAttributes);

function ReplacePriceAttributes (jNode) {
    // Following could alternatively could use `.data("bind")` since attribute is of `data-` type.
    var oldBind = jNode.attr ("data-bind");
    if (/Price:/.test (oldBind) ) {
        let newBind = oldBind.replace ("db.totalpr().toFixed(2)", `( db.totalpr() * ${current_exchange_rate} ).toFixed(2)`);
        jNode.attr ("data-bind", newBind)
    }
}

current_exchange_rate is hard-coded in the script. Getting live values is beyond the scope of this question and covered elsewhere, anyway.

---

The real problem:

Replacing those attribute values is very unlikely to accomplish what you really want (displaying prices in USD). This is especially true if the page is driven by Knockout.js (as it looks appears to be).

To change the displayed prices that you see, use a technique very similar to the linked answer...

waitForKeyElements ("[data-bind]", ReplacePriceText);

function ReplacePriceText (jNode) {
    var oldPriceTxt = jNode.text ();
    /* Appropriate HTML not provided by question asker, but convert price text
        as shown in linked answer, setting newPriceTxt
    */
    jNode.text (newPriceTxt);
}

Answer 2

In case the page uses knockout.js, I would suggest the following.

Note: This does only work after the bindings have been applied. If you apply your js code before that, a single replacement of the binding should do it. Just like you already did it, but with attention to the ".toFixed(2)" issue (see the comment from Mike McCaughan). If that's the reason why it didn't work you should also see errors in the console log.

$( document ).ready(function() {
  // Their code. Just for demonstration.
  var viewModel = {
    db: {
      totalpr: new ko.observable(123.1234)
    }
  };
  
  ko.applyBindings(viewModel);
  
  // Your Greasemonkey code starts here:
  var current_exchange_rate = 1.41;  //  Hard coded for demo purposes only.
  
  var priceElements = $("h5[data-bind*= 'db.totalpr().toFixed(2)']")

  $.each(priceElements, function(index, value) {
    var data = ko.dataFor(value);

    // Add your new value to their model. Use ko.pureComputed to ensure its changed as soon as totalpr changes.
    data.db.modifiedTotalPr = ko.pureComputed(function () {
      return data.db.totalpr() * current_exchange_rate;
    });
    
    // Update data-bind attribute.
    $(value).attr("data-bind" , "text: 'Price: ' + db.modifiedTotalPr().toFixed(2) + ' USD'")
    
    // Apply binding.
    ko.cleanNode(value)
    ko.applyBindings(data, value);
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="row">
    <div class="col-md-5">
        <h5 data-bind="text: 'Price: ' + db.totalpr().toFixed(2) + ' GBP'" style="margin-left:7px"></h5>
    </div>
</div>