前端JS-敏感词的替换

最新推荐文章于 2025-04-15 18:13:47 发布

Coding-弱鱼

最新推荐文章于 2025-04-15 18:13:47 发布

阅读量2.6k

点赞数 1

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/weixin_47412580/article/details/125920010

版权

前端专栏收录该内容

15 篇文章

订阅专栏

敏感词的替换问题

1.背景
在一些场合，需要对于一些敏感词汇进行替代，来达到净化网络的效果。这样就需要我们对于敏感词汇替换，这些操作在游戏，评论等区域已经屡见不鲜。
今天就来学习一下，在前端工程师的一些简易的敏感词替换。
2.方法
对于敏感词的替换，使用replace函数，将正则表达式引入，完成所需的替换内容。

<!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>敏感词替换</title>
    <style>
        .click {
            display: block;
            margin-left: 150px;
        }
    </style>
</head>

<body>
    <textarea name="输入" id="t1" cols="50" rows="10"></textarea>
    <div class="click">
        <button class="submit">提交</button>
        <button class="clc">清除</button>
    </div>
    <div class="talk">

    </div>
    <script>
        var regexp = /傻|操|马|B/gi;
        var sub = document.querySelector('.submit');
        var clc = document.querySelector('.clc');
        var t1 = document.getElementById('t1');
        var talk = document.querySelector('.talk');
        clc.addEventListener('click', function () {
            t1.value = '';
            talk.innerHTML = '';
        })
        sub.addEventListener('click', function () {
            talk.innerHTML = t1.value.replace(regexp, '*');
        })
    </script>
</body>

</html>

关于replace函数的介绍

语法
str.replace(regexp|substr, newSubStr|function)

参数
regexp (pattern)

一个RegExp 对象或者其字面量。该正则所匹配的内容会被第二个参数的返回值替换掉。 substr (pattern) 一个将被
newSubStr 替换的字符串。其被视为一整个字符串，而不是一个正则表达式。仅第一个匹配项会被替换。 newSubStr
(replacement)
用于替换掉第一个参数在原字符串中的匹配部分的字符串。该字符串中可以内插一些特殊的变量名。参考下面的使用字符串作为参数。 function
(replacement) 一个用来创建新子字符串的函数，该函数的返回值将替换掉第一个参数匹配到的结果。参考下面的指定一个函数作为参数。

返回值