我想知道如何使用 jquery 在 div 中找到内部的值，但解析有关"/"的信息

Question

我知道如何获取信息并将其分配为变量，但我想知道我是否可以使用 jquery 解析div 内部的信息。

例如：div 的值为 "1/3"。

我如何告诉 jquery 取 "/" 左侧的任何内容并将其除以 "1/3" 右侧的任何内容以获得 0.3333 的值，并用该"0.3333"将其作为变量赋值？

Answer 1

您可以在字符串上使用 split：

$(function() {
  var text = $('#a1').text();
  var splitted = text.trim().split('/')
  console.log(splitted[0]);
  console.log(splitted[1]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a1">
  1/3
</div>

或使用正则表达式：

$(function() {
  var text = $('#a1').text();
  var matches = text.trim().match(/(.*)/(.*)/)
  console.log(matches[1]);
  console.log(matches[2]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a1">
  1/3
</div>

Answer 2

编辑

这是一些混合了分数的文本以十进制处理的解决方案......
喜欢：<span id="fraction">My portion is 1/3 ok? So there is 2/3 left for you.</span>

并重建原始字符串，结果如下：

<span id="decimal">My portion is 33% ok? So there is 67% left for you.</span>我玩得超级开心！
;)

请参阅代码中的注释。
代码笔

// Our input string.
var fractionText = $("#fraction").html();
var number;
var divider;
var calculatedArr=[];
var text=[];
var showRes="";
// Parse the string for fraction and text based on a regular expression.
let fractionParts;
var pattern = /([D.]+)?(d)+(/)(d)+([D.]+)?/g;
while ((fractionParts = pattern.exec(fractionText)) !== null) {
  if (fractionParts.index === pattern.lastIndex) {
    pattern.lastIndex++;
  }
  fractionParts.forEach((match, groupIndex) => {
    // If there is a match, text is optional in the regex.
    if(typeof(match)!="undefined"){
      switch (groupIndex){
        case 0:
          // Nothing to do, that is the full match.
          break;
        case 1:
          if(typeof(match)!="undefined"){
            text.push(match);
          }
          break;
        
        case 2:
          number = parseInt(match);
          break;
        
        case 3:
          // Nothing to do, that is the / (division sign).
          break;
          
        case 4:
          divider = parseInt(match);
          calculated = number/divider;
          if(!isNaN(calculated)){
            calculatedArr.push(calculated.toFixed(2));
          }
          break;
        case 5:
          text.push(match);
          break;
        default:
          // Nothing to do.
          break;
      }
    }
  });
}
// Determine wich one is the longuest array
// (text or calculated number) before building the result string.
var LongestArr;
if(calculatedArr>text){
  LongestArr=LongestArr;
}else{
  LongestArr=text;
}
// Build the string.
for(i=0;i<LongestArr.length;i++){
  if(typeof(text[i])!="undefined"){
    showRes += text[i].toString();
  }
  if(typeof(calculatedArr[i])!="undefined"){
    showRes += calculatedArr[i]*100 + "%";
  }
}
// Show result in page.
$("#decimal").html(showRes);

span{
  padding:4px;
  border:1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Fraction: <span id="fraction">My portion is 1/3 ok? So there is 2/3 left for you.</span><br>
<br>
Decimal: <span id="decimal"></span>

---

第一个答案
如果您只有一小部分，这就可以正常工作...

但是，如果分数前面有其他文本，它将失败。

var divText = $("#test").html();
var divTextArr = divText.split("/");
var number = divTextArr[0].trim();
var divider = divTextArr[1].trim();
var calculated = parseInt(number)/parseInt(divider);
$("#result").html(calculated);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Fraction: <span id="test">1/3</span>
<br>
Calculated: <span id="result"></span>