js 笔记_06 实例练习以及与 html, css 实现敏感词替换

在数组的后面新增该数组的倒序，以新数组输出

思路：
1、用一个新数组拷贝原数组；
2、将原数组倒序；
3、用 push 放入新数组。

function array(arr){
    let arr2 = arr.concat();
    arr.reverse();
    for(let i = 0; i < arr.length; i++) {
        arr2.push(arr[i]);
    }    
    return arr2;
}

console.log(array(['one','two','three']));

检查一个字符串中单词的个数

思路：
一个字符前面是字母，后面不是字母，则记为有一个单词。

let num = 0;

// 一个字符前面是字母，后面不是字母，则记为有一个单词
function countWord(str) {
    for (i = 0; i <= str.length; i++)
    if (isABC(str[i]) && !isABC(str[i+1])) {
        num ++;
    }
    return num;
}

// 检查该字符是否是字母
function isABC(a) {
    if(a >= 'a' && a <= 'z' || a >= 'A' && a <='Z') {
        return true;
    } else {
        return false;
    }
}

console.log(countWord('hello&my111world(,happy@'));     // 4

与html, css 结合，检查出敏感词并替换

思路：
1、利用<textarea> 标签定义多行的文本输入控件;
2、设置一个按钮来控制提交；
3、设置一个容器来显示替换后的文字；

html 文件

与 onclick 点击事件驱动函数相似，onblur也是一个事件驱动函数，表示失去焦点，即当鼠标点击onblur所在标签外，就触发定义在这里面的函数。（此例中onblur没有实际作用，就是写来了解一下）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <textarea name="" id="text" cols="30" rows="10" onblur="lost();"></textarea>  <!--onblur 失去焦点 事件驱动函数 -->
    <div id="btn">
        <button onclick="buttonClick();">提交</button>  <!--onclick 点击事件驱动函数-->
    </div>
    <div id="box"></div>
    
    <script src="src/click.js"></script>
</body>
</html>

css 文件

定义一下所用容器的相关内容

#box{
    width: 235px;
    height: 200px;
    border: 1px solid black;
}

#btn{
    width: 235px;
    height: 40px;
    text-align: center;
}

此时效果如下：
在这里插入图片描述

js 文件

const otext = document.querySelector('#text');
const obox = document.querySelector('#box');

const arr = [/abc/ig,/nb/ig];					//敏感词

//onclick 点击事件驱动函数
function buttonClick(){  
    let oValue = otext.value;                   // 获取输入的字符串     
    
    for (let i = 0;i <= arr.length; i++) {      //将敏感词替换成*
        oValue = oValue.replace(arr[i], '*');
    }

    obox.innerHTML = oValue;                    //显示的文字
    otext.value = '';                           // 清空输入框中的文字
}

点击提交按钮，效果如下：
在这里插入图片描述