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

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

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

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

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

html模板是这样：

  1. <ul class="icon_list">
  2.             <li><a href="#"><img src="data:images/floor1-1.png" alt=""></a>
  3.                 <p>360杀毒</p>
  4.                 <p>10.00M</p>
  5.                 <a href="">下载</a></li>
  6.             <li><a href="#"><img src="data:images/floor1-2.png" alt=""></a>
  7.                 <p>软件管家</p>
  8.                 <p>10.00M</p>
  9.                 <a href="">下载</a></li>
  10. </ul>

json是这样：

  1. {softList:[
  2.     {"name":"360杀毒","size":"10.00M","png_src":"/floor1-1.png","href":"www.baidu.com"},
  3.     {"name":"软件管家","size":"12.00M","png_src":"/floor1-2.png","href":"www.baidu.com"},
  4.     {"name":"360浏览器","size":"14.00M","png_src":"/floor1-3.png","href":"www.baidu.com"},
  5.     {"name":"360商场","size":"10.20M","png_src":"/floor1-4.png","href":"www.baidu.com"},
  6.     {"name":"影视大全","size":"11.00M","png_src":"/floor1-5.png","href":"www.baidu.com"},
  7.     {"name":"万能省电","size":"13.00M","png_src":"/floor1-6.png","href":"www.baidu.com"},
  8.     {"name":"360wifi","size":"25.10M","png_src":"/floor1-7.png","href":"www.baidu.com"},
  9.     {"name":"360ROOT","size":"10.90M","png_src":"/floor1-8.png","href":"www.baidu.com"},
  10. ]}

结果是这样：

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7.     <title>page name</title>
  8.     <style>
  9.         /*超链接去下划线*/
  10.         a {
  11.             display: block;
  12.             overflow: hidden;
  13.             outline: none;
  14.             text-decoration: none;
  15.             color: black;
  16.             font-family: "Microsoft YaHei UI";
  17.             color: #333;
  18.         }
  19.         /*li去掉点号*/
  20.         li {
  21.             list-style-type: none;
  22.             text-align: center;
  23.         }
  24.         .floor h2 {
  25.             font-size: 1.6em;
  26.             margin-top: 10px;
  27.             margin-left: 4%;
  28.             color: #333333;
  29.         }
  30.         /*响应式布局核心css*/
  31.         .floor .icon_list{
  32.             min-width: 320px;
  33.             display: flex;
  34.             flex-direction: row;
  35.             flex-wrap: wrap;
  36.             justify-content: flex-start;
  37.         }
  38.  
  39.         .floor .icon_list li {
  40.             width: 25%;
  41.             margin-bottom: 15px;
  42.         }
  43.  
  44.         .floor .icon_list li img {
  45.             width: 60%;
  46.         }
  47.  
  48.         .floor .icon_list li p {
  49.             margin: 4px;
  50.             font-size: 15px;
  51.             color: #33333f;
  52.         }
  53.  
  54.         .floor .icon_list li p:nth-child(3) {
  55.             color: #ccc;
  56.             font-size: 14px;
  57.         }
  58.  
  59.         .floor .icon_list li a:last-child {
  60.             margin: 5px auto 0;
  61.             width: 66%;
  62.             height: 25px;
  63.             border: none;
  64.             line-height: 27px;
  65.             border-radius: 18px;
  66.             background: #def3e1;
  67.             font-size: 14px;
  68.             color: #23ac38;
  69.         }
  70.  
  71.     </style>
  72. </head>
  73.  
  74. <body>
  75.  
  76. <!--手机软件-->
  77. <div class="content">
  78.     <div class="floor">
  79.         <h2>手机软件</h2>
  80.         <ul class="icon_list" id="softList">
  81.         </ul>
  82.     </div>
  83. </div>
  84. </div>
  85. </body>
  86. <script>
  87.     //json可以通过ajax加载进来
  88.     var json = {
  89.         softList: [
  90.             {"name": "360杀毒", "size": "10.00M", "png_src": "/floor1-1.png", "href": "www.baidu.com"},
  91.             {"name": "软件管家", "size": "12.00M", "png_src": "/floor1-2.png", "href": "www.baidu.com"},
  92.             {"name": "360浏览器", "size": "14.00M", "png_src": "/floor1-3.png", "href": "www.baidu.com"},
  93.             {"name": "360商场", "size": "10.20M", "png_src": "/floor1-4.png", "href": "www.baidu.com"},
  94.             {"name": "影视大全", "size": "11.00M", "png_src": "/floor1-5.png", "href": "www.baidu.com"},
  95.             {"name": "万能省电", "size": "13.00M", "png_src": "/floor1-6.png", "href": "www.baidu.com"},
  96.             {"name": "360wifi", "size": "25.10M", "png_src": "/floor1-7.png", "href": "www.baidu.com"},
  97.             {"name": "360ROOT", "size": "10.90M", "png_src": "/floor1-8.png", "href": "www.baidu.com"},
  98.  
  99.         ]
  100.     }
  101.     //动态添加’手机软件 处的列表元素
  102.     function addSoftList(softList) {
  103.         //a要使用getElementById，如果使用getElementsByClassName注意要加[0]
  104.         var a = document.getElementById('softList');
  105.         //var a = document.getElementsByClassName('icon_list')[0];
  106.         var str = '';
  107.         //一条li的格式
  108.         /*<li><a href="#"><img src="data:images/floor1-1.png" alt=""></a>
  109.          <p>360杀毒</p>
  110.          <p>10.00M</p>
  111.          <a href="">下载</a></li>*/
  112.         for (var i in softList) {
  113.             str += '<li><a href="#"><img src="data:images' + softList[i].png_src + '" alt=""></a>' +
  114.                     '<p>' + softList[i].name + '</p>' +
  115.                     '<p>' + softList[i].size + '</p>' +
  116.                     '<a href="' + softList[i].href + '">下载</a></li>';
  117.         }
  118.         //追加元素
  119.         a.innerHTML += str;
  120.     };
  121.     //这样调用
  122.     addSoftList(json.softList);
  123. </script>
  124. </html>

展开代码

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

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

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

例如：border-bottom-color->borderBottomColor

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

  1. var str='border-bottom-color';
  2. String.prototype.transform = function(){
  3. var arr = this.split('-'); //切分单词，存到数组
  4. var _length=arr.length;
  5. for(var i=1;i<_length;i++){
  6. arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substring(1);
  7. //首字母大写
  8. }
  9. return arr.join('') ;//合并数组到字符串
  10. }
  11.  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. 分享一些自己的学习过程和学习方法（来自daimajia）

    每天,都会有人在微博上私信我,问我关于学习和成长的问题.这种问题我一般都不会回复某个j,毕竟每个人的情况不一样,每个人对待事物的性格也不一样,我不能夸下海口的说,你看某本书几个月就能如何如何,我能做的 ...

  2. 【USACO 3.2】Spinning Wheels（同心圆旋转）

    题意: 5个同心圆,告诉你角速度,每个圆有1至5个楔,告诉你起点和宽度.求最早时间如果有的话使得存在某个角度经过5个圆的楔. 题解: 最重要的是要意识到,360秒钟后,每个圆都回到了原来的位置. 我的 ...

  3. MYSQL的大数据量情况下的分页查询优化

    最近做的项目需要实现一个分页查询功能,自己先看了别人写的方法: <!-- 查询 --> <select id="queryMonitorFolder" param ...

  4. table:设置边距,td内容过长用省略号代替

    table:设置边距,td内容过长用省略号代替 1.table:设置边距 合并表格边框border-collapse: collapse,然后用th,td的padding设置内容和边框之间的空隙pad ...

  5. 网页访问全过程剖析[转].md

    本文转载自:http://www.cnblogs.com/wenanry/archive/2010/02/25/1673368.html 原文翻译自:http://igoro.com/archive/ ...

  6. 了解PHP中的register_shutdown_funcion

    (PHP 4, PHP 5, PHP 7) register_shutdown_function - Register a function for execution on shutdown 执行P ...

  7. 转：解决npm install慢的问题

    使用NPM(Node.js包管理工具)安装依赖时速度特别慢,为了安装Express,执行命令后两个多小时都没安装成功,最后只能取消安装,笔者20M带宽,应该不是我网络的原因,后来在网上找了好久才找到一 ...

  8. Swift中的类型转换

    写在前面:1,类型转换的两种方式 2,as!和as?的用法 3,类型判断中 is和===的用法 类型转换方式一,利用类型的构造器进行转换 let str = " var i = Int(st ...

  9. Nginx在线服务状态下平滑升级或新增模块的详细操作

    今天应开发的需求,需要在Nginx增加一个模块,并不能影响现有的业务,所以就必须要平滑升级Nginx,好了,不多说了 1:查看现有的nginx编译参数 /usr/local/nginx/sbin/ng ...

  10. 使用django开发博客过程记录3——博客侧栏实现

    说起这个侧栏真是苦恼我很长时间,一开始以为和之前的一样传递额外参数就可以了就像下面这样: class IndexView(ListView): template_name = 'apps/index. ...