来源：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. 三个小项目入门Go语言｜字节青训营笔记

    前言 这是青训营的第一课,今天的课程比较快速的讲解了go语言的入门,并配合三个小的项目实践梳理所学知识点,这里详细回顾一下这三个项目,结合课后作业要求做一些代码补充,并附上自己的分析,青训期间的所有课 ...

  2. linux篇-公司网络故障那些事（路由器变交换机）

    首先这次网络故障是断电引起的 我给大家画个模型 三层的为八口交换机 一层的为五口打印机 笔记本代表两台无线打印机 首先八口的连接了公司采购电脑一台,业务电脑一台,其他电脑三台 第二个五口交换的连接财务 ...

  3. [漏洞复现] [Vulhub靶机] Tomcat7+ 弱口令 && 后台getshell漏洞

    免责声明:本文仅供学习研究,严禁从事非法活动,任何后果由使用者本人负责. 0x00 背景知识 war文件 0x01 漏洞介绍 影响范围:Tomcat 8.0版本 漏洞类型:弱口令 漏洞成因:在tomc ...

  4. Spring Cloud OpenFeign 的 5 个优化小技巧！

    OpenFeign 是 Spring 官方推出的一种声明式服务调用和负载均衡组件.它的出现就是为了替代已经进入停更维护状态的 Feign(Netflix Feign),同时它也是 Spring 官方的 ...

  5. 关于基础RMQ——ST算法

    RMQ,Range Maximum/Minimum Query,顾名思义,就是询问某个区间内的最大值或最小值,今天我主要记录的是其求解方法--ST算法 相对于线段树,它的运行速度会快很多,可以做到O( ...

  6. 一个恢复CSI挂载信息的解决方法

    一个恢复CSI挂载信息的解决方法 问题描述 之前有做过一个华为OBS 的CSI插件,其基本运作原理如下图所示.CSI插件Pod挂载了主机的/var/lib/kubelet/pods目录,当创建挂载Pv ...

  7. npm run serve修改为npm run dev

    找到package.json文件,打开文件找到  "serve": "vue-cli-service serve"  这一行,把前面的 serve 修改 dev ...

  8. [WUSTCTF2020]颜值成绩查询-1

    分享下自己在完成[WUSTCTF2020]颜值成绩查询-1关卡的手工过程和自动化脚本. 1.通过payload:1,payload:1 ,payload:1 or 1=1--+,进行判断是否存在注入, ...

  9. C语言学习之我见-strncat()可调整的字符串拼接函数

    strncat()函数,用于两个字符串的拼接. (1)函数原型 char * strncat(char * Dest,const char * Source,size_t _Count)` (2)头文 ...

  10. vivo 容器集群监控系统架构与实践

    vivo 互联网服务器团队-YuanPeng 一.概述 从容器技术的推广以及 Kubernetes成为容器调度管理领域的事实标准开始,云原生的理念和技术架构体系逐渐在生产环境中得到了越来越广泛的应用实 ...