Mouseover/Hovering 期间仅从特定文本段落中获取数字

Question

我在检测 html 字符串段落中的数字时遇到问题。让我从 html 页面的概述开始。

1 table 只包含数字
1 段由字母、数字和符号组成

我想做的是，当用户将鼠标悬停或悬停在段落中的任何数字上时，table中的相同数字将在样式上发生变化（可能突出显示）。

问题是，如何仅通过鼠标悬停或悬停使用 jQuery 从段落中提取数字？

我一直在考虑为段落中的每个数值添加 span 标签，这样我就可以使用 `$(this).find('span').text(...) 来匹配table 之后的单元格。

谁能告诉我如何开始检测？ Tqvm!

Answer 1

您可以使用正则表达式从文本中获取所有数字，然后对其进行处理。

// 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);
    });

});

Answer 2

$(document).ready(function(){
  var tds = $('td');
  
  $('span').on('mouseenter ', function(){
    var text = $(this).text();
    $.each(tds, function(i, l){
      var tmp = tds.eq(i).text();
      if (tmp == text) {
        tds.eq(i).addClass('highlight');
      } else {
        tds.eq(i).removeClass('highlight');
      }
    });
  });

  $('span').on('mouseleave', function(){
    $.each(tds, function(i, l){
      tds.eq(i).removeClass('highlight');
    });
  });
  
});

.highlight{
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
    <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

<p>
Lorem <span>1</span> Ipsum <span>2</span> Dolor <span>3</span>
</p>
</p>

Mouseover/Hovering 期间仅从特定文本段落中获取数字

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

html

javascript

jquery

code-analysis