JS字符串长度判断,超出进行自动截取的实例(支持中文)

JS字符串长度判断和自动截取实例

在前端开发中,我们经常需要对用户输入的字符串进行长度限制。在一些场景下,如果超出了指定的长度,需要进行自动截取操作。本文将介绍如何使用JavaScript进行字符串长度判断和自动截取,并提供支持中文的完整示例代码。

字符串长度的计算方法

在JavaScript中,可以使用 length 属性来获取一个字符串的长度。例如:

----- --- - ------ -------
------------------------ -- -- --

但是,需要注意的是,对于包含中文字符的字符串,由于中文字符占用的字节数不同于英文字符,所以直接使用 length 属性得到的长度可能不准确。例如:

----- --- - --------
------------------------ -- -- -

在上面的代码中,虽然字符串中只有四个字符,但是由于每个中文字符占用了两个字节,所以得到的长度为7。因此,在进行字符串长度计算时,需要区分中英文字符,并根据实际情况进行计算。

判断字符串是否超过指定长度

在进行字符串长度判断时,我们可以通过比较字符串的实际长度和指定长度来判断是否超出限制。下面给出一个函数 isOverLength(str, len) 来判断一个字符串 str 是否超过指定长度 len

-------- ----------------- ---- -
  --- ---------- - --
  ------- - - -- - - ----------- ---- -
    ----- -------- - ------------------
    ----------- -- - -- -------- -- ---- -
      ---------- -- --
    - ---- -
      ---------- -- --
    -
  -
  ------ ---------- - ----
-

在上面的代码中,我们首先定义一个计数器 realLength,然后遍历字符串的每个字符,并根据字符的 ASCII 编码值来判断是英文字符还是中文字符。如果是英文字符,则将计数器加1;如果是中文字符,则将计数器加2。最后,比较计数器的值是否大于指定的长度即可。

自动截取超过长度的字符串

当一个字符串超出了指定长度时,我们需要对其进行自动截取操作。为了保证截取后的字符串不会出现乱码或半个汉字等问题,我们需要根据实际情况进行截取,并且在截取完成后添加省略号以表示被截取。下面给出一个函数 autoSubstring(str, len) 来自动截取超过长度的字符串:

-------- ------------------ ---- -
  --- ------ - ---
  --- ---------- - --
  ------- - - -- - - ----------- ---- -
    ----- -------- - ------------------
    ----------- -- - -- -------- -- ---- -
      ---------- -- --
    - ---- -
      ---------- -- --
    -
    ------------- -- ---- -
      ------ -- -------
    - ---- -
      ------
    -
  -
  ------------- - ---- -
    ------ - ------------------- ------------- - -- - ------
  -
  ------ -------
-

在上面的代码中,我们首先定义一个空字符串 result 来存储截取后的结果,然后遍历字符串的每个字符,并根据字符的 ASCII 编码值来判断是英文字符还是中文字符。同时,我们也需要记录字符串的实际长度。如果当前字符加上之前已经遍历过的字符的长度小于等于指定长度,则将其添加到结果字符串中;否则,停止遍历,并在结果字符串末尾添加省略号。

完整支持中文的示例代码

下面给出完整支持

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/1580


猜你喜欢

  • 移动端点击态处理的三种实现方式

    在移动端Web应用中,为了提升用户体验以及让用户更加清晰地感知到自己当前的操作行为,我们需要对用户的点击行为进行一些视觉上的反馈。这个视觉反馈被称作“点击态”,通常表现为点击时元素背景色、边框、阴影等...

    8 年前
  • js中常用的Math方法总结

    JS中常用的Math方法总结 在前端开发过程中,数学计算是一个非常重要的部分。通过使用JavaScript的内置Math对象,我们可以轻松地执行各种数学运算。本文将总结JS中常用的Math方法,包括数...

    8 年前
  • 利用VUE框架,实现列表分页功能示例代码

    利用Vue框架实现列表分页功能 在前端开发中,实现列表的分页功能是非常常见的需求。而借助于Vue框架,我们可以很方便地实现这个功能。 实现思路 在 Vue 组件中定义需要进行分页的数据列表 list...

    8 年前
  • JavaScript中localStorage对象存储方式实例分析

    在前端开发中,数据的存储和管理非常重要。localStorage是Web Storage API提供的一个存储接口,允许我们在浏览器中存储键值对数据,并且该数据可以永久保存在客户端上。

    8 年前
  • angular2倒计时组件使用详解

    Angular2倒计时组件使用详解 在前端开发中,倒计时是一个常见的需求。为了避免重复造轮子,让我们来介绍一下Angular2中可用的倒计时组件。 安装和引入 要使用Angular2倒计时组件,需要先...

    8 年前
  • JavaScript实现星级评分

    在Web开发中,我们经常需要为用户提供对某个产品或服务的评价和打分功能。其中,星级评分是一种直观、简单且易于使用的方式。本文将介绍如何使用JavaScript实现星级评分功能。

    8 年前
  • 那些精彩的JavaScript代码片段

    那些精彩的 JavaScript 代码片段 JavaScript 是前端开发中必不可少的语言之一。在日常工作中,我们需要写出高质量、高效的代码来实现各种功能。为了帮助大家更好地理解和掌握 JavaSc...

    8 年前
  • 简单的渐变轮播插件

    在前端开发中,轮播组件是一个非常常见且实用的UI组件。本文将介绍如何使用HTML、CSS和JavaScript创建一个简单的渐变轮播插件。 实现思路 创建一个包含所有轮播项的容器,并设置其宽度为所有轮...

    8 年前
  • 微信小程序 PHP后端form表单提交实例详解

    微信小程序 PHP 后端 form 表单提交实例详解 在微信小程序开发中,我们常常需要向后端服务器提交表单数据。本文将介绍如何使用 PHP 作为后端语言来处理微信小程序前端的表单提交请求。

    8 年前
  • 移动端基础事件总结与应用

    移动端开发在日常工作中扮演着重要的角色。针对不同的设备,我们需要深入了解它们的交互方式和特点,并掌握相应的技术来实现用户体验。本文将介绍移动端常见的事件类型、触发顺序以及如何应用它们来构建交互功能。

    8 年前
  • 微信小程序 使用canvas制作K线实例详解

    微信小程序使用Canvas制作K线实例详解 1. 简介 在微信小程序中,我们可以使用 Canvas 组件来进行一些高级的绘图操作。本文将介绍如何使用 Canvas 组件来绘制 K 线图,并提供示例代码...

    8 年前
  • canvas实现绘制吃豆鱼效果

    用 Canvas 实现绘制吃豆鱼效果 在前端开发中,Canvas 是一个非常强大的工具,可以用来实现各种图形和动画效果。本文将介绍如何使用 Canvas 实现经典游戏《吃豆鱼》的效果,涉及到如下内容:...

    8 年前
  • 基于jQuery实现照片墙自动播放特效

    照片墙是一种常见的网页设计元素,它能够让网页变得更加生动有趣。在这篇文章中,我们将介绍如何使用jQuery实现基础照片墙,并且添加一个自动播放特效。 实现思路 我们将通过以下步骤实现自动播放特效: ...

    8 年前
  • js实现微博发布小功能

    使用JavaScript实现微博发布小功能 在本文中,我们将介绍如何使用JavaScript来实现微博发布小功能。这个小功能可以让用户输入文本内容并将其发布到页面上的微博列表中。

    8 年前
  • 微信小程序 页面跳转传递值几种方法详解

    在微信小程序中,页面之间的跳转是非常常见的需求。而在页面跳转的过程中,需要传递一些数据也是很常见的需求。本文将介绍微信小程序中页面跳转传递值的几种方法,并提供详细的示例代码。

    8 年前
  • 很棒的一组js图片轮播特效

    很棒的一组JS图片轮播特效 在前端开发中,图片轮播是一个常见的需求。本文将介绍一组很棒的JS图片轮播特效,其中包括多种不同的轮播风格和交互效果。 轮播插件的选择 在选择轮播插件时,我们需要考虑以下几个...

    8 年前
  • 微信小程序 MD5加密登录密码详解及实例代码

    在微信小程序中,为了安全考虑,我们通常需要对用户的登录密码进行加密处理。而MD5算法是一种常用的加密方式,它可以将任意长度的数据转换为固定长度的哈希值,且不可逆。 MD5 加密原理 MD5算法的加密过...

    8 年前
  • 详解angularJs中自定义directive的数据交互

    详解AngularJS中自定义Directive的数据交互 在AngularJS中,通过Directive可以封装可复用的UI组件和逻辑代码,以实现更好的代码重用性和可维护性。

    8 年前
  • Javascript 使用ajax与C#获取文件大小实例详解

    Javascript使用AJAX与C#获取文件大小实例详解 在前端开发中,经常需要获取远程服务器上的文件大小等信息。本文将介绍如何使用Javascript与C#结合使用AJAX技术来获取远程文件的大小...

    8 年前
  • js实现自动轮换选项卡

    JS实现自动轮换选项卡 在前端开发中,选项卡是一个常见的组件,它能够在有限的空间内展示大量信息,并且可以提高用户体验。在这篇文章中,我们将介绍如何使用JavaScript实现自动轮换选项卡的功能。

    8 年前

相关推荐

    暂无文章