来源：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. 忽略https域名校验不通过

    curl curl 报错: curl: (51) Unable to communicate securely with peer: requested domain name does not ma ...

  2. 398. Random Pick Index - LeetCode

    Question 398. Random Pick Index Solution 思路:重点是如果数据中有多个数target相等,要从这些数中随机取一个,根据例题 假设输入是: int[] nums ...

  3. 105_Power Pivot财务科目（层级深度&筛选深度）

    博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 1.背景 在财务科目中,需要按照科目层级来显示:在excel中都是用公式来实现,而且对于数据的管理及更新是一件头痛的事情, ...

  4. 安装Net-Tools到CentOS（YUM）

    Net-Tools是一个Linux系统中基本的网络工具集,其集成了常用的网络管理命令"ifconfig.netstat.arp.route等". 运行环境 系统版本:CentOS ...

  5. vue大型电商项目尚品汇（前台篇）day05终结篇

    前台部分到此结束,一路走来还挺怀念,今天主要是对整个项目的完成做一个最后的收尾工作,对于功能上的需求没有什么了,主要就是项目上线的一些注意事项. 一.个人中心二级路由 当我们点击查看订单应该跳转到个人 ...

  6. hash和history路由的区别

    在了解路由模式前,我们先看下 什么是单页面应用,vue-router  的实现原理是怎样的,这样更容易理解路由. SPA与前端路由 SPA(单页面应用,全程为:Single-page Web appl ...

  7. 工具分享：清理 Markdown 中没有引用的图片

    前言: 之前,我写笔记的工具一直都是 notion,而且没有写博客的习惯.但是一是由于 notion 的服务器在国外,有时候很不稳定:二是由于 notion 的分享很不方便,把笔记分享给别人点开链接之 ...

  8. 用Arduino显示颜色序列（u8g2，OLED）

    目录 用Arduino显示颜色序列(u8g2,OLED) 用Arduino显示颜色序列(u8g2,OLED) 提前祝大家新年快乐! 主控:Arduino Mega 2560 硬件:126×64 OLE ...

  9. Keil软件下用Jlink无法识别芯片

    Keil软件下用Jlink无法识别芯片 硬件:正点原子探索者 软件:keil J-Link固件版本:V9.40 J-Link V6.94b驱动:下载地址 跟着视频教程走,发现的第一个问题就是这个,记录 ...

  10. Python3 collections模块

    https://www.cnblogs.com/zhangxinqi/p/7921941.html http://www.wjhsh.net/meng-wei-zhi-p-8259022.html h ...