自定义标签&JSON数据处理
最近几日去参加一些面试，多多少少有一些收获。
现将遇到的一些面试题，做一下分析和总结。
1、使用原生JS，不能使用递归，查找dom中所有以“<com-”开头的自定义标签tagName。
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>DOM获取自定义标签</title>
</head> <body>
<con-1>con11</con-1>
<con-2>con22</con-2>
<con-3>con33</con-3> <p>p11</p>
<p>p12</p>
<p>p13</p>
<p>p14</p> <com-1>com11</com-1>
<com-2>com12</com-2>
<com-3>com13</com-3> <script type="text/javascript">
//获取body下的所有内容，结果为字符串
var str = document.getElementsByTagName('*')[0].innerHTML;
console.log(str); //使用正则表达式，用于匹配字符串中对自定义标签
var reg = /<com-.*>.*<\/com-.*/g; //利用字符串对象的match()方法并结合正则，获取字符串str中匹配的正则子串，结果为数组
var res = str.match(reg); console.log(res); /* 输出的结果：
<com-1>com11</com-1> <com-2>com12</com-2> <com-3>com13</com-3>
*/
</script>
</body> </html>
2、将一个多维对象转换为二维对象：
// 封装一个函数，使得对象obj转换后的结果为objTo的形式
var obj = {
"data": {
"err": 1,
"msg": "错误"
},
"list": ["a", "b"],
"request_id": "geo5-esd1-efor-veuq"
};
var objTo = {
"data.err": 1,
"list.0": "a",
"list.1": "b",
"reuqest_id": "geo5-esd1-efor-veuq"
};
js代码如下：
<script type="text/javascript">
var obj = {
"data": {
"err": 1,
"msg": "错误"
},
"list": ["a", "b"],
"request_id": "geo5-esd1-efor-veuq"
};
var objTo = {
"data.err": 1,
"list.0": "a",
"list.1": "b",
"reuqest_id": "geo5-esd1-efor-veuq"
}; //封装函数
function toObj(obj) {
var newObj = {}; for(let pro in obj) {
if(obj[pro].push != undefined) {
for(let i = 0; i < obj[pro].length; i++) {
newObj[pro + '.' + i] = obj[pro][i];
}
} else if(typeof obj[pro] == 'object') {
for(let j in obj[pro]) {
if(obj[pro][j] == '错误') { } else {
newObj[pro + '.' + j] = obj[pro][j];
}
}
} else {
newObj[pro] = obj[pro];
}
}
return newObj;
}
console.log(toObj(obj));
</script>
3、写一种方法：将一个维度比较高的对象转换为GET参数模式（URL地址拼接的带有参数的字符串）
该方法写的有点乱，如果有哪位大神有更优的解决方法，希望共勉！
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>对象转换为URL参数</title>
</head> <body>
<script type="text/javascript">
var obj = {
"openid": "123456",
"userinfo": {
"name": "小明",
"sex": "男",
"tags": ["读书", "游戏", "旅行"],
"settings": {
"theme": "white",
"signature": "好好学习天天向上",
"size": 16
}
},
"status": 200
}; //封装函数
function toURL(obj) {
var str = '?'; for(var key in obj) {
if(key == 'status') { } else {
//判断数据类型
var type = typeof(obj[key]);
//基本类型数据拼接
if(type == 'string' || type == 'number' || type == 'boolean') {
str += key + '=' + encodeURIComponent(obj[key]) + '&';
} else if(type == 'object') {
//对象类型判断
for(var pro in obj[key]) {
var type2 = typeof(obj[key][pro]);
if(type2 == 'string' || type2 == 'number' || type2 == 'boolean') {
str += key + '.' + pro + '=' + encodeURIComponent(obj[key][pro]) + '&';
} else if(type2 == 'object') {
//判断对象数据是否为数组
if(obj[key][pro] instanceof Array) {
var arr = obj[key][pro];
var strs = '';
for(var k = 0; k < arr.length; k++) {
strs += encodeURIComponent(strArr[k]);
}
str += strs;
} else {
for(var pros in obj[key]) {
str += 'obj' + '.' + key + '=' + encodeURIComponent(obj[key][pro]) + '&';
}
}
}
}
}
}
}
//处理字符串末尾的&字符
str = str.substring(0, str.length - 1);
console.log(str);
}
toURL(obj); </script>
</body> </html>
自定义标签&JSON数据处理的更多相关文章
- jsp的三种自定义标签 写法示例
1.自定义方法标签 引入方式示例: <%@ taglib prefix="fns" uri="/WEB-INF/tlds/fns.tld" %> 写 ...
- JavaScript---网络编程(5)-自定义对象Json、Dom模型概念讲解
这节博客主要讲解Dom模型概念~和JSON的简单介绍 首先,还是先上out.js的代码: function println(param){ document.write(param+"< ...
- HTML自定义标签与标签自定义属性
大部分浏览器支持自定义HTML标签和为标准标签自定义属性,而且很多浏览器对这两种自定义行为的支持都很直接了当. 自定义HTML标签 在firefox.chrome这种现代浏览器里,自定义标签很简单,就 ...
- SpringMVC和Freemarker整合,带自定义标签的使用方法
SpringMVC和Freemarker整合,带自定义标签的使用方法. [参考来源:http://www.360doc.com/content/14/1225/14/1007797_435663342 ...
- 【转】Jsp自定义标签详解
一.前言 原本是打算研究EXtremeComponents这个jsp标签插件,因为这个是自定义的标签,且自身对jsp的自定义标签并不是非常熟悉,所以就打算继续进行扫盲,开始学习并且整理Jsp自定义标签 ...
- Django 六——自定义标签、图片验证码、发送邮件、评论树、组合搜索
1.自定义标签 2.图片验证码 3.生成邮箱验证码.发送邮件 4.评论树实现 5.组合搜索(Q) 1.自定义标签 配置: a.在app中新建文件夹 templatetags,里面新建 xx.py文 ...
- [JSP]自定义标签库taglib
自定义标签的步骤 自定义标签的步骤大概有三步: 1.继承javax.servlet.jsp.tagext.*下提供的几个标签类,如Tag.TagSupport.BodyTagSupport.Simpl ...
- [Java] JSP笔记 - 自定义标签
自定义标签的创建步骤: 自定义标签的四大功能: 自定义标签的类结构: 在 1.0 中呢, 可以将 <body-content> 的值设置为 JSP, 2.0中则不允许在自定义标签体中出现j ...
- thinkphp自定义标签库
thinkphp ~ php中 的类, 的成员变量, 本身是没有类型说明的, 那么我怎么知道它的类型呢? 或初始值呢? 通常在类定义中, 如果能给一个初始值的(对于已知简单类型的),最好给一个初始值, ...
随机推荐
- Matplotlib 绘图与可视化 一些控件的介绍和属性，反正就是乱七八糟的
这个链接里有下面这个图(图里还有超链接):https://matplotlib.org/3.1.1/api/artist_api.html#matplotlib.artist.Artist 各种图例: ...
- 基于vue+springboot+docker网站搭建【五】部署vue前端项目
部署vue前端项目 一.下载项目到本地 https://github.com/macrozheng/mall-admin-web 二.npm install 三.修改api配置,改为你接下来要部 ...
- Vue开发日志
一 搭建环境 mac 安装node brew install node 安装vue 全家桶 npm install -g vue-cli 选择一个目录做初始化 vue init webpack myp ...
- js获取客户端IP
获取客户端公网IP <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> <scr ...
- 完整且易读的最新版小程序登录态和检验注册过没的app.js写法
目录 0.可参考的官方页面 1.流程 2.app.js代码 3.java后台怎么通过code获取openId 0.可参考的官方页面 获取登录凭证:https://developers.weixin.q ...
- PHP 格式化显示时间 date() 函数【转】
date() 函数 功能:用于格式化时间,返回一个字符串. 语法:string date( string format [, int timestamp] ),其中参数 format 表示时间格式化 ...
- centos下直接使用命令备份mysql数据库
mysqldump -u root -p 要备份的数据库名> /home/mysql/backup/db/back/数据库名.sql
- 使用springboot集成腾讯云短信服务，解决配置文件读取乱码问题
springboot集成腾讯云短信服务: (1)导入依赖 <dependency> <groupId>org.springframework.boot</groupId& ...
- h5表单亲测
Document 下载进度: 标签. 牛奶 面包 男 女 one two three 按钮 搜索 请输入搜索内容 加密强度 用户名 Email 密码 年龄 身高 生日 这一系列是很酷的一个类型,完全解 ...
- 【Spring AOP】Spring AOP之你必须知道的AOP相关概念（1）
一.什么是AOP AOP(Aspect-oriented Programming)即面向切面编程,是对OOP( Object-oriented Programming)即面向对象编程的一种补充,AOP ...