判断一段文本具体长度为多少px

最新推荐文章于 2023-03-19 18:22:18 发布

weixin_34417183

最新推荐文章于 2023-03-19 18:22:18 发布

阅读量486

点赞数

文章标签： python php

原文链接：https://my.oschina.net/zhenggao/blog/2986939

版权

2019独角兽企业重金招聘Python工程师标准>>>

文本中由文字，有英文大小写，有数字还有各种符号。这时如果要用js判断它的长度为多少px。

1.获取字符串 str

2.将str拆成数组arr

3.遍历arr，分别求出中文个数，大写英文个数，小写英文个数.......

4.根据设置的字体大小，求出每种类型字符分别为多少px（直接输入文本，在网页里查看多大）

5.最后求出文本长度

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var str = '江山如此多娇，引无数英雄竞折腰。俱往矣，数风流人物，还看今朝。';

    /**
     * 获取一段文本具体长度为多少px
     * @param str
     * @returns {number}
    */
    function getTextWidth(str) {
        var width = 0;
        var html = document.createElement('span');
        html.innerText = str;
        html.className = 'getTextWidth';
        document.querySelector('body').appendChild(html);
        width = document.querySelector('.getTextWidth').offsetWidth;
        if(isIE()||isIE11()) {
            document.querySelector('.getTextWidth').removeNode(this);
        }else {
            document.querySelector('.getTextWidth').remove();
        }
        return width;
    }
    /**
     * 判断是否是IE浏览器
     * @returns {boolean}
     */
    function isIE(){
        if(!!window.ActiveXObject || "ActiveXObject" in window){
            return true;
         }else{
            return false;
         }
    }
    /**
     * 判断是否是IE11浏览器
     * @returns {boolean}
     */
    function isIE11(){
        if((/Trident\/7\./).test(navigator.userAgent)){
            return true;
        }else{
        return false;
     }
    }
 
    var w = getTextWidth(str);
    console.log(w);
</script>
</body>
</html>

转载于:https://my.oschina.net/zhenggao/blog/2986939