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); 

現在，我需要扭轉的是，當用戶集中在輸入欄上。 這是工作提琴：

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

基本上，我需要顯示/隱藏輸入的值以同樣的方式我在小提琴證明。

難道有人請諮詢我如何能做到這一點？

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

我還簡化計算所述屏蔽值， 應表現得更好，從而消除了陣列操作的實現。

Answer 2

將原始值保留爲str。這裏有一個乾淨而簡單的答案，其中包括重新隱藏blur：

var cc = $('.cc'); 
var str; 
var trailingCharsIntactCount = 4; 

function getHiddenValue() { 
    str = cc.val(); 
    return new Array(str.length - trailingCharsIntactCount + 1).join('*') + str.slice(-trailingCharsIntactCount); 
} 

cc.val(getHiddenValue()); 
cc.focus(function() { cc.val(str); }); 
cc.blur(function() { cc.val(getHiddenValue()); });