JS校验textarea输入框中是否包含中文

最新推荐文章于 2022-03-22 14:53:59 发布

原创最新推荐文章于 2022-03-22 14:53:59 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript

本文提供了一个使用JavaScript编写的简单示例来检测输入文本中是否包含中文字符。通过将字符串拆分为数组并逐一检查每个字符来实现，同时介绍了几种用于字符串操作的方法。

写在前面

下面html代码可以直接在菜鸟教程的网站去运行,比较方便快捷,省时省力.

代码功能描述

判断你的输入中有没有汉字,直接上代码吧,文章最后在说说其中遇到的问题.

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>JS校验字符中是否有中文</title>
  </head>

  <head>
    <script>function judgeChinese(obj, spanid) {

        var str = obj.value;
        var strArray = str.split("");

        var haveChinese = false;
        var i;
        for (i = 0; i < strArray.length; i++) {
          if (isChinese(strArray[i])) {
            haveChinese = true;
            break;
          }
        }
        if (haveChinese) {
          document.getElementById(spanid).innerHTML = "有中文!";
        } else {
          document.getElementById(spanid).innerHTML = "没有中文!";
        }

      }

      function isChinese(c) {
        var specialChar = "~!@#$%^&*()_+{}:\"<>?-=[];',./'vwxyz";
        var index = specialChar.indexOf(c);
        if (index > -1) {
          return false;
        } else {
          var re = /[^u4e00-u9fa5]/;
          return re.test(c);
        }

      }</script>
  </head>

  <body>输入文字:
    <textarea id="fname" onchange="judgeChinese(this,'spanId')"></textarea>
    <span id="spanId" style="color:red;">有汉字吗?</span>
    <p>当你离开输入框后，函数将被触发，将判断你的输入中是否有汉字。</p>
  </body>

</html>

总结

字符串分成数组

JS代码var arr = str.split(""),比如str=”abcd”时,arr=[‘a’,’b’,’c’,’d’].str中的汉字也当成作为一个字符.split()的其他用法就不说了,具体参考菜鸟教程JavaScript|split.

遍历数组

用for循环来做.这里发现了两种方法:
方法一:

for(var i = 0; i < arr.length; i++){
    arr[i];
}

方法二:

var i;
for(i in arr){
    arr[i];
}

方法二比较类似java的foreach循环,但是我用的时候出了问题,就是当数组完了,但是循环还没有停.所以我的代码采用了方法一做遍历.
对for循环还感兴趣的,可以看看菜鸟教程中的for

判断某串中是否有某个字符

这里介绍三个函数.
str.match(var regexp)返回值是数组,会返回str中的所有符合正则的字符段数组集合.
str.indexOf(var c)返回第一次出现c的位置,没有返回-1.
str.lastIndexOf(var c)返回最后一次出现c的位置,没有返回-1.

关于正则匹配中文汉字

网上的教程都是这一个正则就解决问题了var re = /[^u4e00-u9fa5]/;但是我在测试的时候几个问题.
1.英文的星号* 冒号: 引号” 引号’等符号也会在re.test(xxx);时返回true.
2.英文字母 vwxyz5个字符也会返回true.
这两个关于字符编码的问题我现在也没有搞懂,然后就用了上面那种折中的办法.(如果这俩个问题不存在的话,也就不用先把字符分成数组在挨个校验了).