0

I have a span where the value possibilities are: "Showing 1 item" or "Showing x to y of z items". Z can be any positive number.

<div class="result-container">
    <span id="results-label">Showing 1 to 10 of 33 items</span>
</div>

I would like to be able to identify z and place it into a newly created span above this, using jQuery. Please note that "item(s)" is not static due to translations. Desired output:

<div class="result-container">
    <span id="total-results">33</span>
    <span id="results-label">Showing 1 to 10 of 33 items</span>
</div>

The regex I am using is \d+(?=[A-Za-z\s]*$) which seems to work https://rubular.com/r/KrHmLUzEsWGU3P

I have two issues:

  1. For some reason creating and inserting a new span fails:

https://jsfiddle.net/ubte7jx3/

  1. I am unsure how to insert the regex result into the span afterwards.
dan_vn
  • 55
  • 7
  • 2
    How are you populating the `results-label` span? – Andrew Corrigan May 11 '22 at 14:27
  • I get a completed html output that I can add Javascript and css to. – dan_vn May 11 '22 at 14:40
  • 1
    What have you tried? Which parts are you having difficulty with? Getting the text? Extracting the number? Either via substr/substring or a regex? Converting a string to a number? Inserting new html? Or are you hoping someone will just provide a solution for you? – freedomn-m May 11 '22 at 14:51
  • 1
    Please see [ask]. You should show some code. – isherwood May 11 '22 at 14:55
  • My apologies - I have added details and a jsfiddle. – dan_vn May 11 '22 at 15:47
  • Your fiddle had a function that wasn't called and was missing jquery (always check the browser console for errors). Fixed that part: https://jsfiddle.net/ctzsn2oj/ with just config of the fiddle and removed wrapped function (so otherwise worked fine) – freedomn-m May 11 '22 at 15:53
  • You can use "matching groups" in the regex, here's an old question: https://stackoverflow.com/questions/432493/how-do-you-access-the-matched-groups-in-a-javascript-regular-expression – freedomn-m May 11 '22 at 15:55
  • 1
    Thank you @freedomn-m, that was very helpful. Eventually I managed to make it work: https://jsfiddle.net/r4fd9xcp/5/ Beginner's luck :) – dan_vn May 11 '22 at 16:58
  • 1
    Some subtle changes, and just FYI, here's what I'd probably do: https://jsfiddle.net/9np32efk/ eg use `.text()` instead of innerHTML just in-case there are some extra tags in the result label and a more explicit regex – freedomn-m May 11 '22 at 17:10

1 Answers1

1

With some help in the comments I managed to arrive to a solution:

<div class="job-tile-result-container">
    <span id="tile-search-results-label">Showing 1 to 10 of 33 items</span>
</div>


$(document).ready(function() {
    $(".job-tile-result-container").prepend('<span id="total-results"></span>');
    var z_string = document.getElementById("tile-search-results-label").innerHTML;
    var z_results = z_string.match(/\d+(?=[A-Za-z\s]*$)/);
    console.log (z_results);
    document.getElementById("total-results").innerHTML = (z_results);
});

https://jsfiddle.net/r4fd9xcp/5/

dan_vn
  • 55
  • 7