1. 字符串处理常常用在处理服务器回传的数据、动态拼接生成html等，是前端面试的必考题。

  2. 我觉得字符串处理这种常用到的，一定要了然于心，不然用到时急急忙忙去翻手册费半天。

入正题，首先提出平常遇到的几个需求，后面我们来一步一步解决它：

需求1：根据服务器返回的json数据，动态添加元素到列表<ul>    【难度：1】

使用场景：瀑布流下拉刷新、延迟加载、ajax点击加载列表

html模板是这样：

<ul class="icon_list">

            <li><a href="#"><img src="data:images/floor1-1.png" alt=""></a>

                <p>360杀毒</p>

                <p>10.00M</p>

                <a href="">下载</a></li>

            <li><a href="#"><img src="data:images/floor1-2.png" alt=""></a>

                <p>软件管家</p>

                <p>10.00M</p>

                <a href="">下载</a></li>

</ul>

json是这样：

{softList:[

    {"name":"360杀毒","size":"10.00M","png_src":"/floor1-1.png","href":"www.baidu.com"},

    {"name":"软件管家","size":"12.00M","png_src":"/floor1-2.png","href":"www.baidu.com"},

    {"name":"360浏览器","size":"14.00M","png_src":"/floor1-3.png","href":"www.baidu.com"},

    {"name":"360商场","size":"10.20M","png_src":"/floor1-4.png","href":"www.baidu.com"},

    {"name":"影视大全","size":"11.00M","png_src":"/floor1-5.png","href":"www.baidu.com"},

    {"name":"万能省电","size":"13.00M","png_src":"/floor1-6.png","href":"www.baidu.com"},

    {"name":"360wifi","size":"25.10M","png_src":"/floor1-7.png","href":"www.baidu.com"},

    {"name":"360ROOT","size":"10.90M","png_src":"/floor1-8.png","href":"www.baidu.com"},

]}

结果是这样：

解决思路：将动态生成各个<li>拼接成字符串，追加到父节点的innerHTML里面

下面给出直接可运行的页面代码（本文太长的代码都会默认折叠了一下）：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>page name</title>

    <style>

        /*超链接去下划线*/

        a {

            display: block;

            overflow: hidden;

            outline: none;

            text-decoration: none;

            color: black;

            font-family: "Microsoft YaHei UI";

            color: #333;

        }

        /*li去掉点号*/

        li {

            list-style-type: none;

            text-align: center;

        }

        .floor h2 {

            font-size: 1.6em;

            margin-top: 10px;

            margin-left: 4%;

            color: #333333;

        }

        /*响应式布局核心css*/

        .floor .icon_list{

            min-width: 320px;

            display: flex;

            flex-direction: row;

            flex-wrap: wrap;

            justify-content: flex-start;

        }

        .floor .icon_list li {

            width: 25%;

            margin-bottom: 15px;

        }

        .floor .icon_list li img {

            width: 60%;

        }

        .floor .icon_list li p {

            margin: 4px;

            font-size: 15px;

            color: #33333f;

        }

        .floor .icon_list li p:nth-child(3) {

            color: #ccc;

            font-size: 14px;

        }

        .floor .icon_list li a:last-child {

            margin: 5px auto 0;

            width: 66%;

            height: 25px;

            border: none;

            line-height: 27px;

            border-radius: 18px;

            background: #def3e1;

            font-size: 14px;

            color: #23ac38;

        }

    </style>

</head>

<body>

<!--手机软件-->

<div class="content">

    <div class="floor">

        <h2>手机软件</h2>

        <ul class="icon_list" id="softList">

        </ul>

    </div>

</div>

</div>

</body>

<script>

    //json可以通过ajax加载进来

    var json = {

        softList: [

            {"name": "360杀毒", "size": "10.00M", "png_src": "/floor1-1.png", "href": "www.baidu.com"},

            {"name": "软件管家", "size": "12.00M", "png_src": "/floor1-2.png", "href": "www.baidu.com"},

            {"name": "360浏览器", "size": "14.00M", "png_src": "/floor1-3.png", "href": "www.baidu.com"},

            {"name": "360商场", "size": "10.20M", "png_src": "/floor1-4.png", "href": "www.baidu.com"},

            {"name": "影视大全", "size": "11.00M", "png_src": "/floor1-5.png", "href": "www.baidu.com"},

            {"name": "万能省电", "size": "13.00M", "png_src": "/floor1-6.png", "href": "www.baidu.com"},

            {"name": "360wifi", "size": "25.10M", "png_src": "/floor1-7.png", "href": "www.baidu.com"},

            {"name": "360ROOT", "size": "10.90M", "png_src": "/floor1-8.png", "href": "www.baidu.com"},

        ]

    }

    //动态添加’手机软件 处的列表元素

    function addSoftList(softList) {

        //a要使用getElementById，如果使用getElementsByClassName注意要加[0]

        var a = document.getElementById('softList');

        //var a = document.getElementsByClassName('icon_list')[0];

        var str = '';

        //一条li的格式

        /*<li><a href="#"><img src="data:images/floor1-1.png" alt=""></a>

         <p>360杀毒</p>

         <p>10.00M</p>

         <a href="">下载</a></li>*/

        for (var i in softList) {

            str += '<li><a href="#"><img src="data:images' + softList[i].png_src + '" alt=""></a>' +

                    '<p>' + softList[i].name + '</p>' +

                    '<p>' + softList[i].size + '</p>' +

                    '<a href="' + softList[i].href + '">下载</a></li>';

        }

        //追加元素

        a.innerHTML += str;

    };

    //这样调用

    addSoftList(json.softList);

</script>

</html>

展开代码

顺便也做成了Flex响应式布局，无论页面是什么尺寸都会自动适应页面大小。

不明白什么是Flex响应式布局的可参见 http://www.cnblogs.com/chris-oil/p/5831028.html

需求2：生成驼峰法字符串    【难度：1】

例如：border-bottom-color->borderBottomColor

解决思路：将字符串按单词切分->将每个子字符串首字母大写->合成新字符串（分别用到split函数、toUpperCase函数、join函数）

var str='border-bottom-color';

String.prototype.transform = function(){

var arr = this.split('-'); //切分单词，存到数组

var _length=arr.length;

for(var i=1;i<_length;i++){

arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substring(1);

//首字母大写

}

return arr.join('') ;//合并数组到字符串

}

 alert(str.transform());

展开代码

前端JS常用字符串处理实例的更多相关文章

  1. JS常用字符串处理方法应用总结

    这篇文章主要总结了JS常用字符串的处理方法,需要的朋友可以参考下   1.indexOf()方法,从前往后查找字符串位置,大小写敏感,从0开始计数.同理,lastIndexOf() 方法从后往前,两个 ...

  2. JS截取字符串方法实例

    // JS截取字符串可使用 substring()或者slice() // // 函数:substring() // 定义:substring(start,end)表示从start到end之间的字符串 ...

  3. 前端js常用正则表达式实例讲解

    本文内容整理自他人优秀的博客,非纯原创.仅借此学习和整理. 1.匹配用户名 规则描述: 长度4-6位: {4,16} 字母: [a-z] [A-Z] 数字: [0-9] 下划线: [_] 减号: [- ...

  4. 前端js实现字符串/图片/excel文件下载

    在web开发中,如果你想让用户下载或者导出一个文件,应该怎么做呢?传统的做法是在后端存储或者即时生成一个文件来提供下载功能,这样的优势是可以做权限控制.数据二次处理,但缺点是需要额外发起请求.增大服务 ...

  5. JS 常用字符串操作

    Js字符串操作函数大全 /*******************************************                        字符串函数扩充              ...

  6. js常用字符串处理方法

    JS自带函数concat将两个或多个字符的文本组合起来,返回一个新的字符串.var a = "hello";var b = ",world";var c = a ...

  7. js常用字符串函数

    // JS字符串 //1.replace字符串替换,只能换第一部分,就是说多个字符相同,只能换下最先的 var str='helloworld!'; alert(str.replace('llo',' ...

  8. Js 常用字符串操作 API

    常用的一些字符串操作 API 整理 1.str.charAt(index).str.charCodeAt(index) - 返回指定位置的字符 / 字符编码(0~65535) index - 必须,表 ...

  9. JS 常用字符串,数组操作

    JavaScript String/Array对象 JS String对象   String 对象属性 属性 描述 constructor 对创建该对象的函数的引用 length 字符串的长度 pro ...

随机推荐

  1. (转) android里，addContentView()动态增加view控件，并实现控件的顶部，中间，底部布局

    http://blog.csdn.net/bfboys/article/details/52563089

  2. iOS开发--OC调用JS篇

    OC调用JS篇 其中相对应的html部分如下: <html> <header> <meta http-equiv="Content-Type" con ...

  3. 日历插件FullCalendar应用：(一)数据展现

    在博客园逛了很长时间了,它帮助我获得了很多知识,很感谢大家的分享,而自己呢,由于各种纠结一直没提笔写博客,直到我看到了这篇文章http://www.cnblogs.com/zhaopei/p/why_ ...

  4. Sublime Text编辑器的12个技巧和诀窍

    本文为您提供Sublime Text编辑器的12个技巧和诀窍,深入挖掘这个看似简洁的代码编辑器,背后所隐藏的实现各种高级功能的无限可能. 1) 选择 以下是一些Sublime Text选择文本的快捷键 ...

  5. Javascript格式化json返回的时间（/Date(1482747413000)/）

    //时间处理,类似/Date(1482747413000)/的形式,得到xxx年xx月xx日 11:11:11 function ChangeDateFormat(jsondate) { jsonda ...

  6. Linux下常用压缩 解压命令和压缩比率对比

    常用的格式有:tar, tar.gz(tgz), tar.bz2, 不同方式,压缩和解压方式所耗CPU时间和压缩比率也差异也比较大. 1. tar只是打包动作,相当于归档处理,不做压缩:解压也一样,只 ...

  7. 一个将 footer 保持在底部的最好方法

    原文: Quick Tip: The Best Way To Make Sticky Footers 当你在布局网页时,有可能会遇到类似下面的这种情况 导致这一问题的原因是页面内容太少,无法将内容区域 ...

  8. windows使用git时出现：warning: LF will be replaced by CRLF

    windows中的换行符为 CRLF, 而在linux下的换行符为LF,所以在执行add . 时出现提示: 执行以下代码 $ rm -rf .git // 删除.git $ git config -- ...

  9. 【总结】.Net面试题集锦 (二)

    一.前面的话 本文的面试题不是很难,这里只是想记录个人的思考过程,另一方面希望有更好的解决办法的大牛留下宝贵的思路,大家共同学习进步. 二.题目 思路:第一步:把一维数组的值和次数存入Dictiona ...

  10. Apache服务器网站访问伪静态内页出现No input file specified.的完美解决方案

    原文地址:Apache服务器网站访问伪静态内页出现No input file specified.的完美解决方案 启用REWRITE的伪静态功能的时候,首页可以访问,而访问内页的时候,就提示:&quo ...