題目：
實現論壇網站中常見的留言板功能，可以過濾敏感詞匯，如圖所示：
實現思路如下：
在網頁中寫入一個空列表 ul， 監聽 發布 按鈕的點擊事件，動態向 ul 中添加列表項。
具體實現步驟：
基礎html和css代碼
HTML代碼如下：
<div id="App">
<textarea name="txt" id="txt"></textarea>
<button id="btn">發布</button>
<ul></ul>
</div>
CSS代碼如下：
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid pink;
outline: none;
resize: none;
}
ul {
margin-top: 50px;
}
li {
width: 300px;
padding: 5px;
background-color: rgb(245, 209, 243);
color: red;
font-size: 14px;
margin: 15px 0;
}
li a {
float: right;
}
JAVAScript代碼
- 首先創建敏感詞過濾的正則表達式對象。
- 給 發布 按鈕綁定單擊事件。
- 處理敏感詞，創建 li 標簽。
- 給 li 標簽中的 a 元素綁定單擊事件，點擊即刪除改行。
- 將其掛載到 ul 列表元素下。
代碼如下：
// 將數組的敏感詞匯替換成 “***”
var arr = ["壞蛋", "笨蛋", "傻瓜", "笨瓜"];
var result = arr.join("|");
// 創建正則表達式對象
var reg = new RegExp(result, "gi");
// 獲取頁面元素
var button = $("button");
var text = $("textarea");
var ul = $("ul");
button.on("click", function () {
// text.val()是輸入框中的值
// replace()方法用于替換敏感字符
var inputVal = text.val().replace(reg, "***");
// 創建 li 標簽
var li = $(
"<li>" + inputVal +
'<a href="JavaScript:;">刪除</a></li>'
);
// li中的a元素綁定點擊事件，點擊則刪除該列表項
li.find("a").on("click", function () {
li.remove();
});
// 添加元素節點
ul.prepend(li);
// 最后，清空文本框中的內容
text.val("");
});
完工。
