首页 > 代码库 > 前端JS常用字符串处理实例

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

2024-08-19 03:30:23   223人阅读

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

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

 

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

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

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

html模板是这样：

<ul class="icon_list">
            <li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/floor1-1.png" ></a>
                <p>360杀毒</p>
                <p>10.00M</p>
                <a href="">下载</a></li>
            <li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/floor1-2.png" ></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="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/floor1-1.png" ></a>
         <p>360杀毒</p>
         <p>10.00M</p>
         <a href="">下载</a></li>*/
        for (var i in softList) {
            str += ‘<li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images‘ + softList[i].png_src + ‘" ></a>‘ +
                    ‘<p>‘ + softList[i].name + ‘</p>‘ +
                    ‘<p>‘ + softList[i].size + ‘</p>‘ +
                    ‘<a href="http://www.mamicode.com/‘ + softList[i].href + ‘">下载</a></li>‘;
        }
        //追加元素
        a.innerHTML += str;
    };
    //这样调用
    addSoftList(json.softList);
</script>
</html>
展开代码

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

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

 

11.5 未完待续。。

 

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


联系
我们