您的位置：首页 > Web前端

前端JS常用字符串处理实例

2017-03-19 20:54 411 查看

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

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

 

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

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

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

html模板是这样：

<ul class="icon_list">
<li><a href="#"><img src="images/floor1-1.png" alt=""></a>
<p>360杀毒</p>
<p>10.00M</p>
<a href="">下载</a></li>
<li><a href="#"><img src="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="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="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 

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





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());


展开代码
 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航