Created
August 3, 2017 21:10
Vue.js masking filters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= | |
Author: Michael Erb (Merb) | |
Description: Masking for email and phone number | |
License: MIT | |
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/ | |
Vue.filter('mask-email', function(value) { | |
if (value) { | |
var indexAt = value.indexOf('@') | |
var emailArray = value.split('') | |
var maskBefore = 4 | |
var maskAfter = 5 | |
var maskedEmail = '' | |
var beforeRange = { | |
startIndex: indexAt - maskBefore, | |
endIndex: indexAt - 1 | |
} | |
var afterRange = { | |
startIndex: indexAt + 1, | |
endIndex: indexAt + maskAfter | |
} | |
if (afterRange.endIndex >= emailArray.length - 1) { | |
afterRange.endIndex = emailArray.length - 3 | |
} | |
for (var i=0; i < emailArray.length; i++) { | |
if (i >= beforeRange.startIndex && i <= beforeRange.endIndex) { | |
if (i != 0) { | |
emailArray[i] = '*' | |
} | |
} else if (i >= afterRange.startIndex && i <= afterRange.endIndex ) { | |
emailArray[i] = '*' | |
} | |
maskedEmail = maskedEmail.concat(emailArray[i]) | |
} | |
} | |
return maskedEmail || value | |
}) | |
Vue.filter('mask-phone', function(value) { | |
var maskedNum = '' | |
var numArray = value.split('') | |
for (var i=0; i < numArray.length; i++) { | |
if (numArray[i] === '(' || numArray[i] === ')') { | |
numArray.splice(i,1) | |
} | |
if (numArray[i] === '-') { | |
numArray.splice(i,1) | |
} | |
} | |
if (numArray.length === 10) { | |
for (var i=0; i < numArray.length; i++) { | |
if (i < 2) { | |
numArray[i] = '*' | |
} else if (i === 2) { | |
numArray[i] = '*-' | |
} else if (i < 5) { | |
numArray[i] = '*' | |
}else if (i === 5) { | |
numArray[i] = '*-' | |
} | |
maskedNum = maskedNum.concat(numArray[i]) | |
} | |
} | |
return maskedNum || value | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Some quick Vuejs filters for masking email and phone number. May add more to this. Suggestions welcome