先來說兩句引導的話,敏感詞過濾功能需要具備將全部的敏感詞都過濾並且替換成*號或者其他任意符號,那么首先要創建一個新數組來存放自定義的敏感詞。然后通過:字符串.replace()方法與正則表達式結合的方法來將字符串與敏感詞數組進行字符匹配
匹配成功就進行替換最后生成一個新字符串,之所以會說生成一個新字符串是因為字符串一旦被定義就無法被通過方法或者其他更改內容,而replace方法會返回生成的新字符串而不會對原來的字符串進行任何改變。
話不多說,先把語句po出來瞧瞧
<style>
#msg{
width: 400px;
height: 200px;
border: 1px solid black; //定義發布框的樣式,可以自定義,問題不大
}
</style>
<script>
var arr = [/靠/ig,/tmd/ig,/sb/ig,] //定義一個全局數組用來存放需要屏蔽的敏感詞,格式: /敏感詞/ig 雙斜杠是正則表達式的用法 “i”表示忽略大小寫全部檢測到,g表示全局檢測
// 將敏感詞都替換成* 正則表達式和replace()
function BtnClick(){
var otex = document.getElementById("tex"); //通過 document.getElementById給獲取給輸入框區域定義的id 讓js查找到此元素以便於讓js控制此元素
var omsg = document.getElementById("msg"); //通過 document.getElementById給獲取給發布框區域定義的id 讓js查找到此元素以便於讓js控制此元素
var oValue = otex.value; //定義一個變量來接收輸入框的值,然后進行檢測
for (var i = 0; i < arr.length; i++) {
oValue = oValue.replace(arr[i],"*"); //replace自己只能替換掉第一次檢測到的敏感詞,所以配合正則表達式以及ig的使用可以忽略大小寫進行全部替換
//因為replace不能更改原字符串的數據,所以將replace生成的新字符串再重新賦值給oValue,字符串不能更改但是可以被賦值
}
omsg.innerHTML = oValue; //讓發布框區域獲取到已經進行敏感詞屏蔽的字符串
otex.value = ''; //清空編輯區域字符串
}
</script>
</head>
<body>//頁面結構
<textarea name="area" id="tex" cols="30" rows="10"></textarea>
<button id="btn" onclick="BtnClick();">發布</button>
<div id="msg"></div>
</body>