javascript - jQuery:反向字符串切片功能？

我有简单的代码，它将用'*'替换字符串中的字符，并且仅显示字符串的最后4个字符。例：

string = 424242424242

应成为：

********4242

这样做的代码是这样的：

var str = $('.cc').val();

var trailingCharsIntactCount = 4;
str = new Array(str.length - trailingCharsIntactCount + 1).join('*') + str.slice( -trailingCharsIntactCount);

$('.cc').val(str);

现在，当用户专注于输入字段时，我需要扭转这种情况。
这是一个工作的小提琴：

https://jsfiddle.net/s66k9x1s/1/

基本上，我需要像在小提琴中演示的那样显示/隐藏输入的值。

有人可以建议我如何实现这一目标吗？

最佳答案

更换琴弦不能在稀薄的空气中进行，
您需要将原始值保存在某个地方。
例如，您可以使用jQuery的.data()。
用.data('value', str)存储原始值，
当领域得到关注时，
从.data('value')还原它。

function getMaskedValue(str) {
  var trailingCharsIntactCount = 4;
  return new Array(str.length - trailingCharsIntactCount + 1).join('*') + str.slice(-trailingCharsIntactCount);
}

var $cc = $('.cc');
var str = $cc.val();
$cc.data('value', str);

$cc
  .val(getMaskedValue(str));
  .focus(function() {
    $(this).val($(this).data('value'));
  });

正如@aaron指出的那样，
失去焦点后，您还想恢复掩盖的值：

$cc
  .focus(function() {
    $(this).val($(this).data('value'));
  })
  .blur(function() {
    str = $(this).val();
    $(this).data('value', str);
    $(this).val(getMaskedValue(str));
  });

他也很对，您不需要.data()，
您可以将实际值存储在变量中。
最好将其隐藏在一个封闭中。
（See fiddle.）

(function() {
  function getMaskedValue(s) {
    var masklen = s.length - 4;
    return s.substr(0, masklen).replace(/./g, '*') + s.substr(masklen);
  }

  var $cc = $('.cc');
  var value = $cc.val();

  $cc
    .val(getMaskedValue(value))
    .focus(function() {
      $(this).val(value);
    })
    .blur(function() {
      value = $(this).val();
      $(this).val(getMaskedValue(value));
    });
})();

我还简化了计算掩码值的实现，
它应该执行得更好，消除了数组操作。