来源：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. OPRF

    在PSI中经常用到OPRF技术,现在系统学习一下. PRF Pseudo Random Function,伪随机函数,主要就是用来产生为伪随机数的. 伪随机数 什么伪随机数? 伪随机数是用确定性的算法 ...

  2. 2021春季学期华清大学EE数算OJ3：岩石的重量

    原题目如下: 看起来,这不过是我们在<程序设计基础>里面接触过的简单动态规划问题(什么,你不知道什么叫动态规划? 什么是动态规划? 百度百科对"动态规划"一词定义如下: ...

  3. wcf使用JetEntityFrameworkProvider.dll写access数据库时，报"操作必须使用一个可更新的查询"错误的解决办法

    由于users用户组无权重写access数据库,需要设置users组用户能读写access数据库.

  4. 6. ZigZag Conversion - LeetCode

    Question 6. ZigZag Conversion Solution 题目大意:将字符串按Z字型排列,然后再一行一行按字符输出 思路:按题目中的第一个例子,画出如下图,通过n的不同值,可以找出 ...

  5. 好客租房6-React脚手架的应用（细节）

    3.2使用react脚手架初始化 npx命令介绍 npm v5.2.0引入的一条命令 目的:提升包内提供的命令行工具的使用体验 原先:先安装脚手架包 再使用这个包中提供的命令 现在无需安装脚手架包 就 ...

  6. 如何实现将拖动物体限制在某个圆形内--实现方式vue3.0

    如何实现蓝色小圆可拖动,并且边界限制在灰色大圆内?如下所示 需求源自 业务上遇到一个组件需求,设计师设计了一个"脸型整合器"根据可拖动小圆的位置与其它脸型的位置关系计算融合比例 如 ...

  7. 微信小程序使用echarts遇到的问题

    问题1:ec-canvas出现上下滑动页面会漂移 解决方法:在标签内加 force-use-old-canvas="true" 问题2:echarts的tooltip会超出边界 解 ...

  8. 『忘了再学』Shell基础 — 21、变量的测试与内容置换

    目录 1.什么是变量的测试与内容置换 2.变量的测试与内容置换 3.示例 例1: 例2: 例3: 1.什么是变量的测试与内容置换 我们之前说过,在Shell中,一个变量未定义,和一个变量为空值的输出效 ...

  9. Windows环境下安装RabbitMQ

    本地安装RabbitMQ安装注意事项: Erlang与RabbitMQ,安装路径都应不含空格符. Erlang使用了环境变量HOMEDRIVE与HOMEPATH来访问配置文件.erlang.cooki ...

  10. ExtJS 布局-VBox布局（VBox layout）

    更新记录: 2022年6月11日 优化文章结构. 2022年6月9日 发布. 2022年6月1日 开始. 1.说明 vbox布局类似auto布局,将子组件一个接一个垂直向下放置,既可以在水平方向也可以 ...