Ways to match a string against a numeric value

Question

Ways to match a string against a numeric value

I have a span id with textContent which have their own time(hour/minutes)

<div class="here">
<span class="time" >8 min</span>
</div>
<div class="here">
<span class="time" >22 min</span>
</div>
<div class="here">
<span class="time" >38 min</span>
</div>
<div class="here">
<span class="time" >1 hour</span>
</div>
<div class="here">
<span class="time" >1 day</span>
</div>

Is there a way to display only the text of spans that contain times less than 60 minutes? I need to exclude the text from spans that show 1 hour or 1 day. It is important for my project to include strings with numbers.

javascript html css

Answer 1

Answer №1

const elements = document.querySelectorAll(".time")
elements.forEach(element => {
  if (/(hour)|(day)/.test(element.textContent)) element.style.display = "none"
})

<div class="here">
  <span class="time">8 min</span>
</div>
<div class="here">
  <span class="time">22 min</span>
</div>
<div class="here">
  <span class="time">38 min</span>
</div>
<div class="here">
  <span class="time">1 hour</span>
</div>
<div class="here">
  <span class="time">1 day</span>
</div>

Answer 2

const elements = document.querySelectorAll(".time")
elements.forEach(element => {
  if (/(hour)|(day)/.test(element.textContent)) element.style.display = "none"
})

<div class="here">
  <span class="time">8 min</span>
</div>
<div class="here">
  <span class="time">22 min</span>
</div>
<div class="here">
  <span class="time">38 min</span>
</div>
<div class="here">
  <span class="time">1 hour</span>
</div>
<div class="here">
  <span class="time">1 day</span>
</div>

Answer 3

Answer №2

let iterate = 5;
for (let index = 0; index < iterate; index++) {
    if (document.querySelectorAll(".time")[index].textContent.includes("min")) {
        console.log(document.querySelectorAll(".time")[index].textContent);
    }
}

This method is also effective

Answer 4

let iterate = 5;
for (let index = 0; index < iterate; index++) {
    if (document.querySelectorAll(".time")[index].textContent.includes("min")) {
        console.log(document.querySelectorAll(".time")[index].textContent);
    }
}

This method is also effective

Ways to match a string against a numeric value

Answer №1

Answer №2

Similar questions

What is the code to create a forward slash on a webpage using HTML/CSS?

The error message "Unexpected token var Node.js" means that there is a syntax error

What steps should be taken to activate eslint caching?

Enhancing UI Design with Styled-Components and Material Components using Media Queries

Steps to programmatically update Node modules:

Using CSS to leverage the power of both Grid and Flex simultaneously

What is the most efficient way to prevent duplicate items from being added to an array in a Vue 3 shopping cart

What are some tactics for circumventing the single-page framework behavior of next.js?

Optional parameters in Sammy.js

In IE9, users can select background elements by clicking on specifically positioned links

How to visually deactivate a flat button ( <input type="button"> ) programmatically with JavaScript

Error: The function req.logIn is not valid

How to use Angular pipes to format dates as Long Dates in the template

Plugin refresh after callback

I need a counter in my React application that is triggered only once when the page scrolls to a specific element

Arrange the columns in the Table in both ascending and descending order

Making JSON function in Internet Explorer

Incorrect Arrow Direction of Bootstrap Popover on SVG Icon

Guide on displaying a real-time "Last Refreshed" message on a webpage that automatically updates to show the time passed since the last API request

Is it possible to eliminate jagged edges in CSS 2D rasterization by applying anti-aliasing to subpixels?