如何利用JS获取div中的倒数第二位数字？

Question

<div class="number">888</div>
请教，如何利用JS获取number中的数字的倒数第二位将其改为“？”。

<strong class="qyq_Peice_number">{$field.users_price}</strong>

{$field.users_price} 这个是CMS的标签。

let number = document.querySelector('.qyq_Peice_number').textContent;
let numberArray = number.split('');
numberArray.splice(-2, 1, '?');
let result = numberArray.join('');
document.querySelector('.qyq_Peice_number').textContent = result;

最终效果：

Answer 1

// 获取 class 为 number 的元素
const numberElement = document.querySelector('.number');

// 获取数字字符串，然后取倒数第二位并将其替换成问号，最后更新元素内容
if (numberElement) {
  const numberText = numberElement.textContent;
  const newNumberText = numberText.slice(0, -2) + '?' + numberText.slice(-1);
  numberElement.textContent = newNumberText;
}

Answer 2

function replace(str, index, text) {
    if (index < 0) index += str.length;
    return str.slice(0, index) + text + str.slice(++index);
}
var div = document.querySelector("div.number");
div.innerHTML = replace(div.innerHTML, -2, "?");

Answer 3

let number = document.querySelector('.number').textContent;
let numberArray = number.split('');
numberArray.splice(-2, 1, '?');
let result = numberArray.join('');
document.querySelector('.number').textContent = result;

首先，使用 document.querySelector() 获取 class 为 number 的 div，然后使用 textContent 获取其中的文本内容，即数字 888。

然后，将获取到的数字字符串转换为字符数组，使用 splice() 方法将倒数第二位的“8”替换为“？”，并将替换后的数组转换成字符串。

最后，使用 document.querySelector() 获取 class 为 number 的 div，并将替换后的数字字符串赋值给 textContent 属性，从而改变数字的显示。

Answer 4

用正则表达式：

const numberElement = document.querySelector('.number');

if (numberElement) {
  const numberText = numberElement.textContent;
  const newNumberText = numberText.replace(/.(?=.$)/, '?');
  numberElement.textContent = newNumberText;
}

Answer 5

<div id="myDiv">abc123efg456hij789klm</div>

<script>
const myDiv = document.getElementById('myDiv')
const text = myDiv.textContent

// 使用正则表达式匹配倒数第二个数字
const matches = text.match(/\d.*\d/g)

if (matches && matches.length > 0) {
  const secondLastDigit = matches[0].slice(-2, -1)
  console.log(secondLastDigit)
}
</script>

Answer 6

1. 使用 querySelectorAll 获取所有 number 元素。

2. forEach 处理：

   1. textContent 获取元素的内容
   2. split 、 splice 、 join 配合使用，生成新的内容数字
   3. 再使用 textContent 替换当前元素的内容

JavaScript：

const allNumber = document.querySelectorAll('.number');
allNumber.forEach(function (number) {
    let text = number.textContent;
    let textArray = text.split('');
    textArray.splice(-2, 1, '?');
    number.textContent = textArray.join('');
})

HTML：

<div>
    <div class="number">12233</div>
    <div class="number">2124243453</div>
    <div class="number">3234243</div>
    <div class="number">443</div>
    <div class="number">5343</div>
    <div class="number">62423</div>
    <div class="number">785885</div>
    <div class="number">82324</div>
</div>