Joysofyz Joysofyz - 6 months ago 10
Javascript Question

Solved: Grab Only Numeric Number from Specific Text Paragraph During Mouseover/Hovering

I am having an issue of detecting numbers from a html string paragraph.
Let me start with an overview of the html page.


  1. 1 table consisting only numbers

  2. 1 paragraph consisting alphabets, numbers and symbols



What I am trying to do is, when user mouseover or hover on any number in the paragraph, the same number in the table will have a change in style (maybe highlighted).

The question is, how do I extract the number from the paragraph using jQuery by just mouseover or hover?

I have been thinking of adding span tag to each numeric value in the paragraph so that I can maybe use `$(this).find('span').text(...) to match with the cells of the table afterwards.

Anyone give me some idea how to start the detection? Tqvm!

Answer

You can use a regex to fetch all numbers from a text and do something with it afterwards.

// Set your selector here, because its probably not all 'p' elements
$("p").hover(function(){
    var paragraphText = $(this).text();
    var allNumbers = paragraphText.match( /\d+/g );
    console.log(allNumbers); // A string, comma seperated, with all numbers
    var numbersArray = allNumbers.split(',');
    console.log(numbersArray); // An array of all the numbers

    // Loop through the array and do something with each number.
    $.each(numbersArray, function(index, theNumber){
        console.log(theNumber);
    });

});
Comments