美文网首页
字符串操作插件

字符串操作插件

作者: 一颗粒普斯 | 来源:发表于2017-12-12 15:43 被阅读41次

    想操作字符串发现jquery里面没有类似数组一样通过下标就能操作的方法,于是想自己写个插件,这里只是简单的功能实现,后续还要优化.最后一个通过字符的宽度进行插入,由于汉字,字符,字母占得间距不一样,需要考虑的因素太多,后续会逐步完善

    ;(function($) {
    
        $.fn.extend({
            /**
             * [在指定的第几个字符的位置插入一个字符]
             * @param  {string} str       [需要操作的字符串]
             * @param  {int} idx       [第几个字符的位置]
             * @param  {string} insertStr [需要插入的字符]
             * @return {[type]}           [返回操作后的内容]
             */
            insertIdxStr: function(str, idx, insertStr) {
    
                str = str.trim().split("");
                str.splice(idx, 0, insertStr);
                str = str.join("");
                
                return this.html(str);
            },
            /**
             * [每隔多少个间隔插入一个指定的字符]
             * @param  {string} str       [需要操作的字符串]
             * @param  {int} num       [间隔的字符个数]
             * @param  {string} insertStr [需要插入的字符]
             * @return {[type]}           [返回操作后的内容]
             */
            insertNumStr: function(str, num, insertStr) {
                str = str.trim().split("");
                for(var i=1; num<str.length; i++, num = i*10+i-1) {
                    str.splice(num, 0, insertStr);
                }
                str = str.join("");
                return this.html(str)
            },
            insertWidthStr: function(str, ftWidth, width, insertStr) {
                //按照占位的间距进行插入
                
            }
        })
    
    })(jQuery);
    

    DEMO

    insertIdxStr(str, idx, inStr);

    <body>
      <div class="div1">
        阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬阿斯蒂芬
      </div>
      <script>
        var str = $(".div1").text();
        $(".div1").insertIdxStr(str, 10, "<br>"); //在第10个字的位置插入换行
      </script>
    </body>
    
    insertIdxStr

    insertNumStr(str, num, inStr);

    $(".div1").insertNumStr(str, 10, "<br>");//每隔10个字换一行
    
    insertNumStr

    相关文章

      网友评论

          本文标题:字符串操作插件

          本文链接:https://www.haomeiwen.com/subject/qbknixtx.html