来源：js获取字符长度并计算px宽度 - 【云】风过无痕 - 博客园 (cnblogs.com)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>JS计算文本字符串长度的两种方法</title>

</head>

<body>

    <span style="font:normal 36px Robot;">qwe</span>

</body>

<script>

    // 字节长度

    String.prototype.byteLength = function () {

        var length = 0;

        Array.from(this).map(function (char) {

            // 字符编码大于255，说明是双字节字符

            if (char.charCodeAt(0) > 255) {

                length += 2;

            } else {

                length++;

            }

        });

        return length;

    }

    // 获取文本px宽度* @param font{String}: 字体样式    eg: normal 36px Robot

    String.prototype.pxWidth = function (font) {

        var canvas = String.prototype.pxWidth.canvas || (String.prototype.pxWidth.canvas = document.createElement("canvas")),

            context = canvas.getContext("2d");

        font && (context.font = font);

        var metrics = context.measureText(this);

        return metrics.width;

    }

</script>

</html>

JS计算文本字符串字节长度和像素长度的方法的更多相关文章

  1. winform计算文本的所占的像素长度

    /// <summary> /// 计算文本的宽度 /// </summary> /// <param name="str"></para ...

  2. JS计算混合字符串长度

    用的是正则表达式 var str = ”坦克是tank的音译”; var len = str.match(/[^ -~]/g) == null ? str.length : str.length +  ...

  3. js把文本字符串转换为文件并下载

    ### 兼容性没有怎么处理啊 exportRaw('text.txt','123123123') function fakeClick(obj) { var ev = document.createE ...

  4. sql server2005版本中，len函数计算了字符串末尾的空格

    sql server2005版本中,len函数计算了字符串末尾的空格的长度,以下是测试脚本: print @@version declare @v varchar(max) set @v = 'hp, ...

  5. js混合计算字符串字节长度

    js混合计算字符串字节长度 function getBt(str) { ) { var char = str.match(/[^\x00-\xff]/ig); : char.length); } el ...

  6. JS计算字符串所占字节数

    最近项目有个需求要用js计算一串字符串写入到localStorage里所占的内存,众所周知的,js是使用Unicode编码的.而Unicode的实现有N种,其中用的最多的就是UTF-8和UTF-16. ...

  7. js计算字符串的字节数和字符串与二进制的相互转化

    一.js计算字符串的字节数方法: //blob获取字符串的字节 var debug = "好的"; var blob = new Blob([debug],{type : 'tex ...

  8. JS计算字符串长度(兼容后端PHP)

    /*** 计算字符串长度* 参数是要计算的字符串* 返回值当前字符串的长度*/function charactersLen (words) { let tempMapWordNum = {} let ...

  9. 【javascript基础】JS计算字符串所占字节数

    废话不说,直接正题吧. 最近项目有个需求要用js计算一串字符串写入到localStorage里所占的内存,众所周知的,js是使用Unicode编码的.而Unicode的实现有N种,其中用的最多的就是U ...

随机推荐

  1. 从rocketmq入手，解析各种零拷贝的jvm层原理

    在上一篇文章中,主要介绍了rocketmq消息的存储流程.其主要使用了mmap的零拷贝技术实现了硬盘和内存的映射,从而提高了读写性能.在流程中有一个非常有意思的预热方法并没有详细分析,因为其中涉及到了 ...

  2. Golang：将日志以Json格式输出到Kafka

    在上一篇文章中我实现了一个支持Debug.Info.Error等多个级别的日志库,并将日志写到了磁盘文件中,代码比较简单,适合练手.有兴趣的可以通过这个链接前往:https://github.com/ ...

  3. unity---点击事件

    点击事件 点击触发的事件脚本 脚本挂载方式 On Click() 如果点击后触发,调用Button物体下,Button_lick脚本中的func函数/func_text 结果

  4. Proxmox 5.4使用vgpu_unlock，为GTX1060开启vGPU支持

    本文介绍如何为GTX1060显卡开启vGPU功能.消费级显卡不支持nvidia GRID vGPU功能.在2021年初,疫情激发了黑客的创作热情,给出了一个vgpu_unlock的补丁,可以让消费级显 ...

  5. DOM标签操作与事件与jQuery查找标签

    目录 DOM之操作标签 创建标签对象 标签对象的属性 innerText与innerHTML 标签内部追加内容 属性操作 事件 常用事件 事件绑定 事件案例 jQuery简介 查找标签 基本选择器 属 ...

  6. 获取并检查系统负载\CPU\内存\磁盘\网络

    安装依赖 需要net-tools.namp! CentOS:yum -y install net-tools nmap Ubuntu:apt-get update && apt-get ...

  7. SpringBoot Restful 接口实现

    目录 SpringBoot 核心注解 SpringBoot Restful 接口实现 封装响应数据 SpringBoot 核心注解 SpringBoot 基础入门 注解 说明 Component 声明 ...

  8. 异常——JavaSE基础

    异常 异常的分类 检查性异常 运行时异常:可能被程序员避免的异常,运行时异常可以在编译时被忽略 错误ERROR:错误不是异常 在Java中把异常当作对象来处理,并且定义了一个基类java.lang.T ...

  9. hibernate-validator的基本使用

    validator是用来校验参数使用! 一般来说校验参数的工作可以放在前端去执行,但是假如有人不经过前端直接调用后端的接口呢?很可能就出现非法数据而导致一些问题,所有服务端也要做数据的校验. 前端校验 ...

  10. 入坑KeePass（四）KeePass通过坚果云WebDav同步方法

    参考博客:什么值得买平台-Keepass+坚果云:多平台密码无缝同步 .1.在坚果云上创建一个同步专用的文件夹(建议勾上"默认不同步到电脑"选项) 创建之后可以把刚才创建的数据库文 ...