散装JS - 雪花飘飘字符串

45 阅读2分钟

游戏激情澎湃时经常会出现对话框满屏雪花的样子,这是怎么实现的呢? 我们使用比较原始基础的js语句的话,需要解决两个层面的问题:

  1. 怎么找到脏话?===>检索命令
  2. 怎么替换脏话为“*”雪花?===>替换命令

在下一步替换的前提是确定这句话中一定有脏话,否则可以不执行替换命令。这里实际上已经表现出我们已经可以确定这里一定包含了一个判断语句if或switch包裹了后面的替换命令

检索

检索的作用是需要先确定这句话里是不是有脏话,思路有两个:

  • 利用string方法的indexOf()返回值实现判断:
    如果检索到了位置,则返回值结果>=0;
    如果检索不到则返回值为-1;
  • 利用string方法includes()返回结果判断:
    如果检索到结果则为true;
    如果检索不到结果则为false。

替换

替换我们也有两个思路:

  • replace()和循环校验
    replace()主要作用在于替换首位被替换参数,且仅能替换首位一个。因此如果有多个重复的脏话,就不能替换,所以需要结合循环直至全部替换完。 举例,使用indexOf()检索和replace()+循环实现脏话替换。
         var str = prompt("insert:");

         do{ 
             var i=0;
             if (str.indexOf("爸")!==-1){
                  str=str.replace("爸","*");
                  continue;  
             }else if(str.indexOf("妈")!==-1){
                 str=str.replace("妈","*");
                  continue;
             }else if(str.indexOf("呆")!==-1){
                 str=str.replace("呆","*");
                  continue;
             }else if(str.indexOf("傻")!==-1){
                 str=str.replace("傻","*");
                  continue;
             }else{
                 // i++;             //有没有也无所谓了。
                 break;
             }
         }while(i<=str.length)
         alert(str);
  • replaceAll()
    它的好处就在于可以一次替换掉所有的被替换参数,但是当出现多个脏话字符需要替换的时候,仍然需要使用循环实现。
        do {
            var i=0;
            if (str.includes("妈")==true){
                str=str.replaceAll("妈","*");
                continue;
            }else if(str.includes("爸")==true){
                str=str.replaceAll("爸","*");
                continue;
            }else if(str.includes("呆")==true){
                str=str.replaceAll("呆","*");
                continue;
            }else if(str.includes("傻")==true){
                str=str.replaceAll("傻","*");
                continue;
            }else{
                break;
            }
        }while(i<=str.length)
        alert(str);

这里面两个循环中的i都没有实际循环用途,只是while必须要一个循环条件,所以有没有增量也无所谓了。
以上两种方法案例的检索和替换是可以交叉使用的,也就是说你可以用indexOf和replaceAll,也可以用includes和replace。他们的区别在于,replace当出现一个脏字出现多次时,在循环次数上可能会超过replaceall,所以是replace+循环的方法。虽然replaceAll也使用了循环,但是这个循环的意义在于检查多个不同的脏字。如果我们只检查一个字不能够出现的话,replaceAll是不需要循环的。