敏感词过滤，js封装class选择器：

程序员倩利技术 2022年11月19日

0 收藏 588 点赞 3,521 浏览 1446 个字

敏感词过滤：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            var aT = document.getElementsByTagName("textarea");
            oBtn.onclick = function () {
                var re = /靠|SB|你妹的/ig;
                aT[1].value = aT[0].value.replace(re, function (str) {
                    var tmp = '';
                    for (var i = 0; i < str.length; i++) {
                        tmp += "*";
                    }
                    return tmp;
                });
            };
        }
    </script>
</head>
<body>
原文 <br/>
<textarea name="" id="" cols="30" rows="10"></textarea>
<br>
替换后: <br>
<textarea name="" id="" cols="30" rows="10"></textarea>
<br>
<input type="button" value="替换" id="btn">
</body>
</html>

通过class选择元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            padding: 20px;
            margin: 20px;
            border: 1px solid #000;
        }
    </style>
    <script>
        function getByClass(cName, obj) {
            var o = null;
            if (arguments.length == 2) {
                o = obj;
            } else {
                o = document;
            }
            var allNode = o.getElementsByTagName("*");
            var aNode = [];
            for (var i = 0; i < allNode.length; i++) {
                var re = new RegExp('(\\s|^)' + cName + '(\\s|$)');
//                if (allNode[i].className == cName) {
                if (re.test(allNode[i].className)) {
                    aNode.push(allNode[i]);
                }
            }
            return aNode;
        }
        window.onload = function () {
            var oBox = document.getElementById("box2");
            var allNode = getByClass('desc', oBox);
            for (var i = 0; i < allNode.length; i++) {
                allNode[i].style.border = '10px solid red';
            }
        }
    </script>
</head>
<body>
<div id="box">
    <div class="desc desc2"></div>
    <div></div>
    <div class="desc desc2"></div>
</div>
<div id="box2">
    <div class="desc desc2"></div>
    <div class="desc desc2"></div>
    <div class="desc3 desc desc-2"></div>
</div>
</body>
</html>