来源：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. C++面向对象-类和对象那些你不知道的细节原理

    一.类和对象.this指针 OOP语言的四大特征是什么? 抽象 封装.隐藏 继承 多态 类体内实现的方法会自动处理为inline函数. 类对象的内存大小之和成员变量有关 类在内存上需要对齐,是为了减轻 ...

  2. 零基础学Java第五节(面向对象一)

    本篇文章是<零基础学Java>专栏的第五篇文章,文章采用通俗易懂的文字.图示及代码实战,从零基础开始带大家走上高薪之路! 本文章首发于公众号[编程攻略] 类与对象 在哲学体系中,可以分为主 ...

  3. 记 iTextSharp 提取中文的问题

    原文 问题 下面的代码中 currentText 能提取到大部分汉字 但是字体为 Non-Embedded Font: AdobeSongStd-Light(Horizontal) 的汉字提取不到 P ...

  4. 抽象数据类型（ADT）

    抽象数据类型(Abstract Data Type,ADT)是指一个数学模型以及定义在这个模型上的一组操作.抽象数据类型的定义仅仅取决于它的一组逻辑特性,而与它在计算机中的表示和实现无关. 例如,in ...

  5. TyepScript学习

    前提 JS缺陷 (1)变量频繁变换类型,类型不明确难以维护 TS定义 (1)定义 以JavaScript为基础构建的语音,一个JavaScript的超集,扩展js添加了类型, 可以在任何支持js的平台 ...

  6. Es图形化软件使用之ElasticSearch-head、Kibana，Elasticsearch之-倒排索引操作、映射管理、文档增删改查

    今日内容概要 ElasticSearch之-ElasticSearch-head ElasticSearch之-安装Kibana Elasticsearch之-倒排索引 Elasticsearch之- ...

  7. 2020.10.24【普及组】模拟赛C组 总结

    T1:暴力 1:先从 6 个中选三个,再把选出的三个全排列,全排列后再判断是否可行 2:把 6 个全都全排列,然后判断 T2:判断误差 1:减法时结果加上 1e-8 2:把小数乘上 1e6 左右 考试 ...

  8. 【clickhouse专栏】新建库角色用户初始化

    一.创建新的database clickhouse创建数据库的语法几乎和其他的关系型数据库是一样的,区别就是clickhouse存在集群cluster和库引擎engine的概念,可以根据需要进行指定. ...

  9. 技术分享 | app自动化测试（Android）--App 控件交互

    原文链接 常用操作 点击操作 通常获取到元素之后,可以调用 click() 方法来实现对这个元素的点击操作.示例代码如下: python 版本 driver.find_element_by_id(&q ...

  10. Arduino WeMos D1 开发环境搭建

    更新记录 2022年4月16日:本文迁移自Panda666原博客,原发布时间:2021年9月2日. WeMos D1介绍 WeMos D1开发板全称是WeMos D1 WiFI UNO R3开发板,基 ...