js 正则表达式匹配函数

// An highlighted block
<template>
  <div>
    input: <el-input style="width: 200px;" v-model="inttest"></el-input>
    <el-button @click="runall">runall</el-button>
    <p>{{Reg1}}</p>
    <p>输入:{{inttest}}</p>
    <p>test = {{test1}}
      <el-button @click="checkTest">checkTest</el-button>
      <b style="color: #2276d2;">&nbsp; test判断是否匹配,返回值为true或者false</b>
    </p>
    <p>match = {{test2}}
      <el-button @click="checkMatch">checkMatch</el-button>
      <b style="color: #2276d2;">&nbsp; match取出匹配的字段</b>
    </p>
    <p>search = {{test3}}
      <el-button @click="checkSearch">checkSearch</el-button>
      <b style="color: #2276d2;">&nbsp; search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。</b>
    </p>
    <p>replace = {{test4}}
      <el-button @click="checkReplace">checkReplace</el-button>
      <b style="color: #2276d2;">&nbsp; replace() 方法 用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。</b>
    </p>
    <p>exec = {{test5}}
      <el-button @click="checkExec">checkExec</el-button>
      <b style="color: #2276d2;">&nbsp; exec() 方法用于检索字符串中的正则表达式的匹配。 该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null</b>
    </p>
  </div>
</template>

<script>
export default {
  name: 'Regex',
  data () {
    return {
      inttest: '',
      RegExpTest: /[0-9]+/,
      test1: '',
      test2: '',
      test3: '',
      test4: '',
      test5: '',
      Reg1: ''
    }
  },
  methods: {
    checkTest () {
      this.test1 = this.RegExpTest.test(this.inttest)
    },
    checkMatch () {
      this.test2 = this.inttest.match(this.RegExpTest)
    },
    checkSearch () {
      this.test3 = this.inttest.search(this.RegExpTest)
    },
    checkReplace () {
      this.test4 = this.inttest.replace(this.RegExpTest, 'a')
    },
    checkExec () {
      this.test5 = this.RegExpTest.exec(this.inttest)
    },
    checkReg () {
      this.Reg1 = '正则表达式:' + this.RegExpTest
    },
    runall () {
      this.checkTest()
      this.checkMatch()
      this.checkSearch()
      this.checkReplace()
      this.checkExec()
      this.checkReg()
    }
  },
  created () {
    this.runall()
  }
}
</script>

<style scoped>

</style>

vue程序,正则表达式的各函数,调用代码,及运行结果。
运行界面

猜你喜欢

转载自blog.csdn.net/LuckyMon/article/details/87797940