js隐藏不需要显示的字符

1.限制字符长度

先贴上html代码，现在要求限制显示h4和h5标签里面的内容长度

<div class="row">
                    <div class="col-xs-12 col-sm-6 col-md-2">
                        <div class="thumbnail">
                            <img class="thumbnail-img" src="../../static/img/vip1.png" alt="">
                            <img class="thumbnail-head" src="http://q1.qlogo.cn/g?b=qq&nk={{qq}}&s=640" alt="...">
                            <div class="caption">
                                <h4>普通用户</h4>
                                <h5>手机号码:<span class="tel">18688888802</span></h5>
                                <p>当月累计收益：5861.330元</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-2">
                        <div class="thumbnail">
                            <img class="thumbnail-img" src="../../static/img/vip3.png" alt="">
                            <img class="thumbnail-head" src="http://q1.qlogo.cn/g?b=qq&nk={{qq}}&s=640" alt="...">
                            <div class="caption">
                                <h4>普通用户</h4>
                                <h5>手机号码:<span class="tel">17300008686</span></h5>
                                <p>当月累计收益：3493.930元</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-2">
                        <div class="thumbnail">
                            <img class="thumbnail-img" src="../../static/img/vip2.png" alt="">
                            <img class="thumbnail-head" src="http://q1.qlogo.cn/g?b=qq&nk={{qq}}&s=640" alt="...">
                            <div class="caption">
                                <h4>普通用户</h4>
                                <h5>手机号码:<span class="tel">18145678666</span></h5>
                                <p>当月累计收益：3090.160元</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-2">
                        <div class="thumbnail">
                            <span>4</span>
                            <img class="thumbnail-head" src="http://q1.qlogo.cn/g?b=qq&nk={{qq}}&s=640" alt="...">
                            <div class="caption">
                                <h4>小强味厨</h4>
                                <h5>手机号码:<span class="tel">18676895500</span></h5>
                                <p>当月累计收益：2379.570元</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-2">
                        <div class="thumbnail">
                            <span>5</span>
                            <img class="thumbnail-head" src="http://q1.qlogo.cn/g?b=qq&nk={{qq}}&s=640" alt="...">
                            <div class="caption">
                                <h4>蓝儿</h4>
                                <h5>手机号码:<span class="tel">13855667529</span></h5>
                                <p>当月累计收益：2098.190元</p>
                            </div>
                        </div>
                    </div>
                </div>

实现限制h4里面内容长度的方法（当字符长度大于1，后面的内容用***代替）

$(document).ready(function () {
        //限制字符个数
        $(".caption h4").each(function () {
            var maxwidth = 1;
            if ($(this).text().length > maxwidth) {
                $(this).text($(this).text().substring(0, maxwidth));
                $(this).html($(this).html() + '***');
            }
        })
    });

实现手机号码隐藏中间四位，需要循环遍历h5里面的span标签，不能直接获取，要不然只能获取到第一个span内容。

$(".tel").each(function () {
        var tel = $(this).text();
        console.log(tel)
        var mtel = tel.substr(0, 3) + '****' + tel.substr(7);
        $(this).text(mtel);
    });

最后贴上效果图