JS實現(xiàn)用特殊符號替換字符串的中間部分區(qū)域的實例代碼
更新時間：2018年07月24日 16:43:00 作者：JentZhang
相信很多人都遇到過敏感信息需要做部分隱藏功能，大多數都是用特殊符號去替換。今天小編給大家?guī)砹薐S實現(xiàn)用特殊符號替換字符串的中間部分區(qū)域的實例代碼，需要的朋友參考下吧
一、引入
相信很多人都遇到過敏感信息需要做部分隱藏功能，大多數都是用特殊符號去替換。
正好今天我又遇到這樣的前端顯示的需求，正好把相關JS記錄下來，方便下次再用。
二、JS部分
/* 部分隱藏處理
** str 需要處理的字符串
** frontLen 保留的前幾位
** endLen 保留的后幾位
** cha 替換的字符串
*/
function plusXing(str, frontLen, endLen,cha) {
var len = str.length - frontLen - endLen;
var xing = '';
for (var i = 0; i < len; i++) {
xing += cha;
}
return str.substring(0, frontLen) + xing + str.substring(str.length - endLen);
};
三、應用實例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>隱藏字符</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<style>
div{
margin:20px;
padding:20px;
}
input[type='button']{
padding:10px;
}
#btn_div{
margin-left:100px;
}
</style>
</head>
<body>
<div>處理之前：<input type="text" id="num"/></div>
<div id='btn_div'><input type="button" value="隱藏處理" onclick="yincang();"></div>
<div>處理之后：<span id="secret_num"></span></div>
<script>
function yincang(){
var num=$('#num').val();
var secret_num=plusXing(num,3,4,'*');
$('#secret_num').text(secret_num);
};
/* 部分隱藏處理
** str 需要處理的字符串
** frontLen 保留的前幾位
** endLen 保留的后幾位
** cha 替換的字符串
*/
function plusXing(str, frontLen, endLen,cha) {
var len = str.length - frontLen - endLen;
var xing = '';
for (var i = 0; i < len; i++) {
xing += cha;
}
return str.substring(0, frontLen) + xing + str.substring(str.length - endLen);
};
</script>
</body>
</html>
四、實例效果
五、總結
這樣就實現(xiàn)了前端顯示的隱藏部分敏感信息的功能了。
其實這個功能完全可以在后臺實現(xiàn)，那樣應該是更安全的！
以上所述是小編給大家介紹的JS實現(xiàn)用特殊符號替換字符串的中間部分區(qū)域的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要介紹了php 修改密碼實現(xiàn)代碼的相關資料,需要的朋友可以參考下2017-05-05
內建函數其實就是內置函數,reduce函數是ECMAScript5規(guī)范中出現(xiàn)的數組方法。在平時的工作中，相信大家使用的場景并不多，這篇文章給大家詳細介紹了函數reduce的應用以及多重疊加，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-10-10
用Javascript實現(xiàn)Windows任務管理器的代碼
在Windows系統(tǒng)上，自從98系統(tǒng)以來就提供了腳本宿主（Windows Scripting Host 簡稱WSH）的功能，WSH可以加載并運行JS和VBS腳本，并支持調用系統(tǒng)的COM組件，在COM組件的支持下腳本可以輕松實現(xiàn)非常強大的功能2012-03-03
這篇文章主要為大家詳細介紹了前端如何通過html2canvas和jsPDF實現(xiàn)HTML網頁轉PDF并導出,文中的示例代碼講解詳細,感興趣的小伙伴可以參考一下2025-01-01
這篇文章主要介紹了js動態(tài)修改表格行colspan列跨度的方法,實例分析了javascript動態(tài)修改html中table屬性的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
layer彈出子iframe層父子頁面?zhèn)髦档膶崿F(xiàn)方法
這篇文章主要介紹了layer彈出子iframe層父子頁面?zhèn)髦档膶崿F(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-11-11
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)圖片輪播切換效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
下面小編就為大家分享一篇純js代碼生成可搜索選擇下拉列表的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
判斷兩個對象是否相等是js中的一個很常見的內容,不同的編程語言和環(huán)境可能會有不同的方式來實現(xiàn)這一目標,在 JavaScript 中,判斷兩個對象是否相等主要有以下幾種方法,感興趣的小伙伴跟著小編一起來看看吧2024-08-08
本文主要介紹了js中常用的Math方法，具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01