javascript - jQuery:反向字符串切片函数？

Question

我有简单的代码，它将用 '*' 替换字符串中的字符，并且仅显示字符串的最后 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);

现在，当用户专注于输入字段时，我需要逆转这一情况。 这是一个工作 fiddle :

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

基本上，我需要以与我在 fiddle 中演示的方式相同的方式显示/隐藏输入的值。

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

Answer 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));
    });
})();

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