敏感字脱敏

yang 发布于 2023-5-30 19:43 阅读：443 JS基础阶段
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <p>个人介绍:</p>
        <textarea cols="30" rows="10"></textarea>
        <p>过滤词：打架、饼干</p>
        <script>
            // 思路：
            // 1.获取相关节点 textarea
            const arr = ["打架", "饼干饼干"];
            const textareaNode = document.querySelector("textarea");
            console.log(textareaNode);
            // 2.给textarea绑定失焦事件blur
            /*
            textareaNode.addEventListener("blur", function () {
                // 3.失焦时获取textarea的值
                let textareaValue = textareaNode.value;
                // 4.获取textarea的值进行替换，替换后赋值给textarea.value
                // 4-1.方法一 遍历
                arr.forEach(function (v) {
                    // console.log(v);
                    textareaNode.value = textareaValue.replace(/打架|饼干/g, "****");
                    // console.log(textareaValue);
                });
            });
            */
            textareaNode.addEventListener("blur", function () {
                // 3.失焦时获取textarea的值
                // let textareaValue = textareaNode.value;
                // 4.获取textarea的值进行替换，替换后赋值给textarea.value
                // 4-1.方法一 遍历
                arr.forEach(function (v) {
                    let textareaValue = textareaNode.value;
                    // console.log(v);
                    textareaNode.value = textareaValue.replace(/打架|饼干/g, "****");
                    // console.log(textareaValue);
                });
            });

            // 4-2.方法二 外挂
            textareaNode.addEventListener("blur", function () {
                textareaNode.value = textareaNode.value.replace(/饼干|打架/g, "****");
            });
        </script>
    </body>
</html>
敏感字脱敏
扫描二维码，在手机上阅读