JSFiddle - React, Tailwind, and code Playground
HTML
<div>
This particular code can get me prices like this:
Lorem ipsum...
<div>This is the current price: <span class="current">$60.00</span></div>
However, there are some prices that have the following structure:
<div>This is the current price: <sup>$</sup><span>80.00</span></div>
How could I improve the algorithm in order to find those prices? Shall I look in the first for loop for <sup>symbol</sup><span>price</span> with regex?
</div>
<div id="matches">Results: <hr /></div>
CSS
#matches {
background-color: green;
color: white;
}
JavaScript
var all = document.body.querySelectorAll(":not(script)");
var regex = /\$\s*[0-9,]+(?:\s*\.\s*\d{2})?/g;
for (var i = 0; i < all.length; i++) {
var node_value = all[i].nodeValue;
for (var j = 0; j < all[i].childNodes.length; j++) {
var node_value = all[i].childNodes[j].nodeValue;
if (node_value !== null) {
var matches = node_value.match(regex);
if (matches !== null && matches.length > 0) {
document.getElementById('matches').innerHTML = document.getElementById('matches').innerHTML + '<br />' + matches[0];
console.log(matches[0]);
}
}
}
}