jQuery - 按符号拆分字符串并获取最后一部分答案

【问题标题】：jQuery - split string by symbol and get last partjQuery - 按符号拆分字符串并获取最后一部分
【发布时间】：2023-03-24 10:09:02
【问题描述】：

如果我有如下银行帐号列表：

<span>6456465465/0471</span>
<span>4547/6456465465/0471</span>
<span>4547/6465465/0471</span>

如何获取每个数字的最后四位数字？有些银行账户有前缀，有些没有。

我的代码只适用于第一个跨度，因为帐户的其余部分有前缀。

$("span").each(function(){
  var kodBanky = $(this).text().split("/")[1];      
  $('body').append("<p>" + kodBanky + "</p>");    
});

Codepen

【问题讨论】：

标签： jquery arrays string

【解决方案1】：

有几种方法可以做到这一点，基本是找到最后一部分，然后使用最后一部分：

// iterate over each <span>:
$("span").each(function() {
  // find the text of the current <span>, split
  // on the '/' characters, and retrieve that last
  // part:
  var kodBanky = $(this).text().split("/").pop();

  // append a newly created <p> element to the
  // <body> element:
  $('<p/>', {
    'text' : kodBanky
  }.appendTo('body');
});

$("span").each(function() {
  var kodBanky = $(this).text().split("/").pop();
  $('body').append("<p>" + kodBanky + "</p>");
});

span {
  display: block;
  margin: 0 0 0.5em 0;
  border-bottom: 1px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>6456465465/0471</span>
<span>4547/6456465465/0471</span>
<span>4547/6465465/0471</span>

值得注意的是，像这样简单的事情几乎肯定不需要 jQuery：

// get all the <span> elements in the document, and convert
// the returned collection, from document.querySelectorAll(),
// into an Array, using Array.from():
var spans = Array.from(document.querySelectorAll('span')),

  // create a <p> element:
  para = document.createElement('p'),

  // two variables for later use:
  clone,
  code;

// iterating over the Array of <span> elements:
spans.forEach(function(span) {
  // 'span' refers to the current array-element,
  // a <span> element, within the array of <span>
  // elements over which we're iterating.

  // code is the text contained within the current
  // <span> after it's trimmed of its leading, and
  // trailing, white-space. We then split that text
  // on the '/' characters, and retrieve the last
  // Array element of the Array using
  // Array.prototype.pop()
  code = span.textContent.trim().split('/').pop();

  // we clone the paragraph:
  clone = para.cloneNode();

  // updating its textContent:
  clone.textContent = code;

  // and append that created-<p> element to
  // document.body:
  document.body.appendChild(clone);
});

var spans = Array.from(document.querySelectorAll('span')),
  para = document.createElement('p'),
  clone,
  code;

spans.forEach(function(span) {
  code = span.textContent.trim().split('/').pop();
  clone = para.cloneNode();

  clone.textContent = code;
  document.body.appendChild(clone);
});

span {
  display: block;
  margin: 0 0 0.5em 0;
  border-bottom: 1px solid #ccc;
}

<span>6456465465/0471</span>
<span>4547/6456465465/0471</span>
<span>4547/6465465/0471</span>

参考资料：

JavaScript：
- Array.from()。
- Array.prototype.forEach()。
- Array.prototype.pop()。
- document.querySelectorAll()。
- Node.cloneNode()。
- Node.textContent。
- String.prototype.split()。
jQuery:
- appendTo()。
- each()。
- text()。

【讨论】：

【解决方案2】：

使用 Array#pop() 方法从拆分数组中获取最后一个元素

$("span").each(function(){
  var kodBanky = $(this).text().split("/").pop();
  $('body').append("<p>" + kodBanky + "</p>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>6456465465/0471</span>
<span>4547/6456465465/0471</span>
<span>4547/6465465/0471</span>

虽然你可以使用String#match()方法或String#slice()方法

$("span").each(function(){
  var kodBanky = $(this).text().match(/\d{4}$/)[0];
  // or
  // var kodBanky = $(this).text().slice(-4);
  $('body').append("<p>" + kodBanky + "</p>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>6456465465/0471</span>
<span>4547/6456465465/0471</span>
<span>4547/6465465/0471</span>

【讨论】：

【解决方案3】：

尝试使用从（字符串大小 - 4）到（字符串大小）的子字符串

var digits = yourSpanVar.substring(yourSpanVar.length-4, yourSpanVar.length);

【讨论】：

【解决方案4】：

这可能会有所帮助。这将给出最后 4 位数字。

$("span").each(function(){
  var kodBanky = $(this).text();
      kodBanky = kodBanky.slice(-4);      
  $('body').append("<p>" + kodBanky + "</p>");    
});

【讨论】：

【解决方案5】：

这应该很容易解决问题

var kodBanky = "";
$("span").each(function(){
  kodBanky = $(this).text();
  kodBanky =  kodBanky.substr(kodBanky.length - 4); 
  alert(kodBanky);
});

Demo这里

【讨论】：

【解决方案6】：

您可以使用String.lastIndexOf:

$(function () {
 
  $("span").each(function(index, ele){
    var kodBanky = ele.textContent.substr(ele.textContent.lastIndexOf('/') + 1);
    $('body').append("<p>Result " + index + ' --> ' + kodBanky + "</p>");
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span>6456465465/0471</span><br>
<span>4547/6456465465/0471</span><br>
<span>4547/6465465/0471</span><br>

另一种可能的方法是：

$(function () {
  
  $("span").each(function(index, ele) {
    // look for the last match..
    var kodBanky = ele.textContent.split(/^.*\/([^/]+)$/).join('');
    $('body').append("<p>Result " + index + ' --> ' + kodBanky + "</p>");
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<span>6456465465/0471</span><br>
<span>4547/6456465465/0471</span><br>
<span>4547/6465465/0471</span><br>

【讨论】：