我将如何使用 innerHTML （或类似的）从数组中的 div 获取纯整数？

Question

代码如下：

<div class="empty player card3">6 Spades</div>
<div class="empty player card4">10 Hearts</div>

我需要将数字（在本例中为 6 和 10）相加以获得分数。我如何在 JavaScript 函数中执行此操作？

编辑：忘记添加“数字”可以是 J、Q、K 或 A (10,10,10,11)。是否也有一个快速转换？

Answer 1

function addCardNumbers() {
  const card3 = document.querySelector(".empty.player.card3");
  const card4 = document.querySelector(".empty.player.card4");
  
  // Remove every non-digit character from the text
  // and convert them to numbers
  const card3Number = Number(card3.textContent.replace(/\D/g, ""));
  const card4Number = Number(card4.textContent.replace(/\D/g, ""));

  return card3Number + card4Number;
}

Answer 2

请走这条路：

function addCardNumbers() {
  const card3 = document.querySelector(".empty.player.card3");
  const card4 = document.querySelector(".empty.player.card4");
  
  return parseInt(card3.textContent) + parseInt(card4.textContent);
}

Answer 3

使用 split() 确保获得数字部分，然后使用 parseInt(value, 10) 以使用 base-10 系统解析 value。如果您未能拆分和识别数字部分，您可能会得到 NaN 作为“小丑”之类的值。如果您不确定号码在哪里，您需要 forEach() split(' ') 的结果并使用 isNan() 来查找号码。而且，如果您不指明 10，您可能会得到一个以 8 为基数的答案...

If the input string begins with "0" (a zero), radix is assumed to be 8 (octal)... (Source: Developer.Mozilla.org)

console.log(parseInt(document.getElementById("6ofspades").innerHTML.split(' ')[0], 10));
console.log(parseInt(document.getElementById("10ofhearts").innerHTML.split(' ')[0], 10));

<div id="6ofspades" class="empty player card3">6 Spades</div>
<div id="10ofhearts" class="empty player card4">10 Hearts</div>

Answer 4

猜测并filling-in你问题的空白，
我编写了一个添加卡片的函数。
它需要三个参数：

布尔值empty：是否应该寻找classempty？
字符串who：例如，"player".
整数数组cardNumbers：例如，[3, 4]。

取所有div中第一个space之前的子串，匹配classes和卡号的文本内容，存入一个临时数组values.

然后求和，初始值 0，JQK 为 10，A 为 11，其余为数字值 - +String 是从数字中获取数字的最短方法字符串.

function cardsValue(empty, who, cardNumbers) {
  var values = cardNumbers.map(
    currentValue => document.querySelector(
      (empty?".empty":"") +
      ("." + who) +
      (".card" + currentValue)
    )
    .textContent
    .split(" ")
    [0]
  );
  return (
    values.reduce(
      (accumulator, currentValue) => {
        accumulator +=
        ["J", "Q", "K"].includes(currentValue)?10:
        currentValue == "A"?11:
        +currentValue;
        return accumulator;
      }, 0
    )
  );
}

console.log("Player: "+cardsValue(true, "player", [3, 4]));
console.log("Computer: "+cardsValue(true, "computer", [9, 10,11]));

<div class="empty player card3">6 Spades</div>
<div class="empty player card4">10 Hearts</div>
<br>
<div class="empty computer card9">K Diamonds</div>
<div class="empty computer card10">A Clubs</div>
<div class="empty computer card11">7 Diamonds</div>

Array.prototype.map()
Array.prototype.reduce()
Conditional (ternary) operator
String.prototype.split()
Node.textContent

不知道classempty对选择是否重要，
也不是卡号。
如果不是：您可以对所有 "player"、"computer"、"player2" 等求和：

function cardsValue(who) {
  var divs = Array.from(document.querySelectorAll("." + who));
  var values = divs.map(
    currentValue =>
    currentValue
    .textContent
    .split(" ")
    [0]
  );
  return (
    values.reduce(
      (accumulator, currentValue) => {
        accumulator +=
        ["J", "Q", "K"].includes(currentValue)?10:
        currentValue == "A"?11:
        +currentValue;
        return accumulator;
      }, 0
    )
  );
}

console.log("Player: "+cardsValue("player"));
console.log("Computer: "+cardsValue("computer"));

<div class="empty player card3">6 Spades</div>
<div class="empty player card4">10 Hearts</div>
<br>
<div class="empty computer card9">K Diamonds</div>
<div class="empty computer card10">A Clubs</div>
<div class="empty computer card11">7 Diamonds</div>

Array.from()

我将如何使用 innerHTML （或类似的）从数组中的 div 获取纯整数？

How would I use innerHTML (or similar) to obtain purely integers from divs in an array?

html

javascript

innerhtml