TextInput、Checkbox、正则

TextInput、Checkbox、正则

一、用户输入

作用：日常开发中如果需要接收用户输入，就可以使用输入组件来完成。

分类：TextInput:单行输入框和TextArea:多行输入框

1.1、TextInput

作用：单行输入框

基础代码：

TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})

常用参数：

常用属性：

代码演示：

@Entry
@Component
struct zy {
  @State text:string = 'QC'
  build() {
    Column(){
      TextInput({placeholder:'请输入你的账号',text:this.text})
        TextInput({placeholder:'请输入你的密码'})
        .type(InputType.Password)//输入框类型（密码输入）
          .placeholderColor(Color.Pink)//提示文字颜色
          .passwordIcon({onIconSrc:$r('app.media.app_icon'),//输入状态图标
            offIconSrc:$r('app.media.foreground')//隐藏状态图标
          })
    }
    .width('100%')
    .height('100%')
  }
}

效果图：

1.2、TextArea

作用：多行输入框，可以用来设置多行文本，用法和TextInput基本一致

基础代码：

TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController})

常用参数：

常用属性：

代码演示：（仅演示了新属性）

@Entry
@Component
struct zy {
  @State text:string = 'QC'
  build() {
    Column(){
      TextArea({placeholder:'请输入'})
        .showCounter(true)//开启计数下标功能showCounter需要配合maxLength使用
        .maxLength(50)//设置最大字数
    }
    .width('100%')
    .height('100%')
  }
}

效果图：

二、多选框

2.1、Checkbox

作用：是一个多选框。

基础代码：

Checkbox(options?: CheckboxOptions)

参数：

常用属性：

2.2、CheckboxGroup

作用：如果要控制多个 Checkbox 的选中状态，可以通过CheckBoxGroup来实现

基础代码：

CheckboxGroup(options?: CheckboxGroupOptions)

参数：

常用属性：

代码演示：

@Entry
@Component
struct zy {
  @State isA:boolean = true
  build() {
    Column(){
     Column(){
       Row(){
         Text('A')
         Checkbox({group:'选项'//用于指定多选框所属群组的名称
         ,name:'A'
           })
           .select($$this.isA)//是否选中
           .selectedColor(Color.Pink)//设置多选框选中状态颜色
       }
       Row(){
         Text('B')
         Checkbox({group:'选项',name:'B'})
           .unselectedColor(Color.Green)//设置多选框非选中状态边框颜色
       }
       Row(){
         Text('C')
         Checkbox({group:'选项',name:'C'})
           .shape(CheckBoxShape.ROUNDED_SQUARE)//设置 Checkbox组件形状
       }
       Row(){
         Text('D')
         Checkbox({group:'选项',name:'D'})
       }
       Row(){
         Text('全选')
         CheckboxGroup({group:'选项'//用于指定多选框所属群组的名称
         })//控制多个 Checkbox 的选中状态
           .selectAll(false)//设置是否全选默认关闭
           .selectedColor(Color.Blue)//设置被选中状态颜色
           .unselectedColor(Color.Orange)//设置非选中边框颜色
           //注册onChange事件获取选中内容的name
           .onChange((res)=>{
            console.log(JSON.stringify(res.name))
           })
       }

     }
    }
    .width('100%')
    .height('100%')
  }
}

效果图：

三、正则表达式

作用：正则表达式是用于匹配字符串中字符组合的模式(规则)

3.1、基本使用

定义正则

// 方式 1：简写

const res1: RegExp = /ArkTS/
// 方式 2：通过实例化的方式创建
const reg2: RegExp = new RegExp('ArkTS')

代码演示：

const re = /违禁词/
const r = '你违禁词'
console.log('',re.test(r))

const r12 = /问候词1/
const r1 = '我问候词你'
console.log('',r12.test(r1))

3.2、 元字符

作用：元字符指的是在正则表达式中，有特殊含义的符号。

3.2.1、边界符

作用：正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符

代码演示：

// 元字符之边界符
// 1. 匹配开头的位置 ^
const reg = /^ArkTS/
console.log('res:', reg.test('ArkTS语法')) //true
console.log('res:', reg.test('学习ArkTS')) //false
console.log('res:', reg.test('学习ArkTS语法')) //felse
console.log('res:', reg.test('Ar')) //false

// 2. 匹配结束的位置 $
const reg1 = /ArkTS$/
console.log('res:', reg1.test('ArkTS语法')) //false
console.log('res:', reg1.test('学习ArkTS')) //true
console.log('res:', reg1.test('学习ArkTS语法')) //false
console.log('res:', reg1.test('Ar')) //false

// 3. 精确匹配 ^ $
const reg2 = /^ArkTS$/
console.log('res:', reg2.test('ArkTS语法')) //false
console.log('res:', reg2.test('学习ArkTS')) //false
console.log('res:', reg2.test('学习ArkTS语法')) //false
console.log('res:', reg2.test('ArkTS')) //true
console.log('res:', reg2.test('Ar')) //false
console.log('res:', reg2.test('ArkTSArkTS')) //false

3.2.2、 量词

作用：量词用来设定某个模式的重复次数

代码演示：

// 元字符之量词
// 1. * 重复次数 >= 0 次
const reg1 = /^w*$/
console.log('res:', reg1.test('')) //true
console.log('res:', reg1.test('w')) //true
console.log('res:', reg1.test('ww')) //true
console.log('res:', '-----------------------')

// 2. + 重复次数 >= 1 次
const reg2 = /^w+$/
console.log('res:', reg2.test('')) //false
console.log('res:', reg2.test('w')) //true
console.log('res:', reg2.test('ww')) //true
console.log('res:', '-----------------------')

// 3. ? 重复次数  0 || 1
const reg3 = /^w?$/
console.log('res:', reg3.test('')) //true
console.log('res:', reg3.test('w')) //true
console.log('res:', reg3.test('ww')) //false
console.log('res:', '-----------------------')


// 4. {n} 重复 n 次
const reg4 = /^w{3}$/
console.log('res:', reg4.test('')) //false
console.log('res:', reg4.test('w')) //false
console.log('res:', reg4.test('ww')) //false
console.log('res:', reg4.test('www')) //true
console.log('res:', reg4.test('wwww')) //false
console.log('res:', '-----------------------')

// 5. {n,} 重复次数 >= n
const reg5 = /^w{2,}$/
console.log('res:', reg5.test('')) //false
console.log('res:', reg5.test('w')) //false
console.log('res:', reg5.test('ww')) //true
console.log('res:', reg5.test('www')) //true
console.log('res:', '-----------------------')

// 6. {n,m}   n =< 重复次数 <= m
const reg6 = /^w{2,4}$/
console.log('res:', reg6.test('w')) //false
console.log('res:', reg6.test('ww')) //true
console.log('res:', reg6.test('www')) //true
console.log('res:', reg6.test('wwww')) //teue
console.log('res:', reg6.test('wwwww')) // false

3.2.3、 范围

作用：表示字符的范围，定义的规则限定在某个范围，比如只能是英文字母，或者数字等等，用表示范围。

代码演示：

// 元字符之范围  []
// 1. [abc] 匹配包含的单个字符， 多选1
const reg1 = /^[abc]$/
console.log('res:', reg1.test('a')) //true
console.log('res:', reg1.test('b')) //true
console.log('res:', reg1.test('c')) //true
console.log('res:', reg1.test('d')) //false
console.log('res:', reg1.test('ab')) //false

// 2. [a-z] 连字符 单个
const reg2 = /^[a-z]$/
console.log('res:', reg2.test('a')) //true
console.log('res:', reg2.test('p')) //true
console.log('res:', reg2.test('0')) //false
console.log('res:', reg2.test('A')) //false
// 3. [^a-z] 取反符
const reg5 = /^[^a-z]$/
console.log('res:', reg5.test('a')) //false
console.log('res:', reg5.test('A')) //true
console.log('res:', reg5.test('么')) //true

// 4.想要包含小写字母，大写字母 ，数字
const reg3 = /^[a-zA-Z0-9]$/
console.log('res:', reg3.test('B')) //true
console.log('res:', reg3.test('b')) //true
console.log('res:', reg3.test('9')) //true
console.log('res:', reg3.test(',')) //false

3.2.4、字符类

作用：某些常见模式的简写方式，区分字母和数字

代码演示：

//匹配0-9之间的任一数字，相当于［0-9］
const reg = /^\d$/
console.log('res:', reg.test('1'))//true
//匹配所有0-9以外的字符，相当于［^0-9］
const reg1 = /^\D$/
console.log('res:', reg1.test('1'))//false
//匹配任意的字母、数字和下划线，相当于［A-Za-z0-9_]
const reg2 = /^\w$/
console.log('res:', reg2.test('2'))//true
//除所有字母、数字和下划线以外的字符，相当于［^A-Za-z0-9_］
const reg3 = /^\W$/
console.log('res:', reg3.test('2'))//false
//匹配空格（包括換行符、制表符、空格符等），相等于［\t\r\n\v\f]
const reg4 = /^\s$/
console.log('res:', reg4.test(' '))//true
//匹配非空格的字符，相当于［^\t\r\n\v\f]
const reg5 = /^\S$/
console.log('res:', reg5.test(' '))//false

3.2.5、 替换和修饰符

作用：字符串的 replace 方法，可以结合正则进行字符串的替换

基本用法：

// 检索规则：文本、正则
// 替换内容：文本
// 返回值：替换之后的结果
字符串.replace(检索规则，替换内容)
 // 替换和修饰符
const str = '欢迎大家学习ArkTS，相信大家一定能学好ArkTS!!!'
// 将 ArkTS 替换位 鸿蒙开发咋写？ 分别用正则和字符串作为检索规则

代码演示：

const res = '奥特曼是日本圆谷株式会社制作进而衍生出的日本特摄英雄的总称。昭和时代的奥特曼作品（《奥特曼》至《爱迪奥特曼》）中奥特曼英雄的出身地均设定成“M78星云”的宇宙人 '
console.log(res.replace(/奥特曼/g,'孙悟空'))
//打印结果：孙悟空是日本圆谷株式会社制作进而衍生出的日本特摄英雄的总称。昭和时代的孙悟空作品（《孙悟空》至《爱迪孙悟空》）中孙悟空英雄的出身地均设定成“M78星云”的宇宙人