Add Javascript to replace Span tags

Question

I have an online store that has limited access to make any correct edits to code.

I am trying to implement proper Price Schema as they have:

<span itemprop="price">$57.00</span> 

This is incorrect.

It needs to be set up like this

<span itemprop="priceCurrency" content="USD">$</span> 
<span itemprop="price">57.00</span>

Is there something in JavaScript or jQuery that can manipulate this by separating the Currency Symbol and Price?

Thanks

Answer 1

You get the ELEMENT text:

var value = $("span[itemprop='price'").text();

Then you could generate the html using regex like:

var html = '$57.00'.replace(/([^\d])(\d+)/,
 function(all, group1, group2){ 
 return 'some html here =' + group1 + '= more hear =' + group2  });

Answer 2

Somthing along the lines of

// find all span's with itemprop price
document.querySelectorAll("span[itemprop='price']").forEach(function(sp){ 
    // grab currency (first char)
    var currency = sp.innerText.substr(0,1);
    // remove first char from price val
    sp.innerText = sp.innerText.substr(1);

    // create new element (our price-currency span)
    var currencySpan = document.createElement("span");
    currencySpan.innerText = currency;
    currencySpan.setAttribute("itemprop", "priceCurrency");
    currencySpan.setAttribute("content", "USD");


    // Append it before the old price span
    sp.parentNode.insertBefore(currencySpan, sp);
});

Should do what your after.

See demo at: https://jsfiddle.net/dfufq40p/1/ (updated to make effect more obvious)

Answer 3

Might not be 100% bug-free, but it should get you started:

<script type="text/javascript">
var n = document.getElementsByTagName('*')
for(var i=0;i<n.length;i++)
{

  if(n[i].hasAttribute('itemprop')) //get elements with itemprop attribute
  {
     var p = n[i].parentNode

     var ih = n[i].innerHTML //grab the innerHTML
     var num = parseFloat(ih) //get numeric part of the innerHTML - effectively strips out the $-sign

     n[i].innerHTML = num

     //create new span & insert it before the old one
       var new_span = document.createElement('span')
       new_span.innerHTML = '$'
       new_span.setAttribute('itemprop', 'priceCurrency')
       new_span.setAttribute('currency', 'USD')

       p.insertBefore(new_span, n[i])
  }
}
</script>

Answer 4

This should work -- querySelectorAll should be a bit faster, and the regex will work with more than just USD, I believe.

function fixItemPropSpan() {
  var n = document.querySelectorAll('[itemprop]');
  for (var i = 0; i < n.length; i++) {

    var p = n[i].parentNode;
    var ih = n[i].innerHTML;
    var num = Number(ih.replace(/[^0-9\.]+/g, ""));

    n[i].innerHTML = num;

    //create new span & insert it before the old one
    var new_span = document.createElement('span');
    new_span.innerHTML = '$';
    new_span.setAttribute('itemprop', 'priceCurrency');
    new_span.setAttribute('currency', 'USD');

    p.insertBefore(new_span, n[i]);
  }
}

Answer 5

Here is a suggestion of how you can make this work, though i would not suggest doing it like this (too many cases for content="" ).

Example of the logic you could use to transform the incorrect format to the correct one.

Hope you find it useful. :]