自定义标签&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中 的类, 的成员变量, 本身是没有类型说明的, 那么我怎么知道它的类型呢? 或初始值呢? 通常在类定义中, 如果能给一个初始值的(对于已知简单类型的),最好给一个初始值, ...
随机推荐
- python 绘图与可视化 Graphviz 二叉树 、 error: Microsoft Visual C++ 14.0 is required
需要对二叉树的构建过程进行可视化,发现了这个Graphviz软件,他对描绘数据间的关系十分擅长. 下载链接:https://graphviz.gitlab.io/_pages/Download/Dow ...
- 类初始化应用（class初始化值用函数改变与增添）
class Dataset(object): def __init__(self): self.image_info = [] # 初始化一个列表 def add_image(self, source ...
- SpringBoot源码解析:创建SpringApplication对象实例
上篇文章SpringBoot自动装配原理解析中,我们分析了SpringBoot的自动装配原理以及@SpringBootApplication注解的原理,本篇文章则继续基于上篇文章中的main方法来分析 ...
- ES6环境搭配(一)
一.Node(NodeJS.Node.js)的安装:1.下载官网下载地址:https://nodejs.org/en/ 2.安装a.Linux先将安装包解压,然后进行环境变量的配置即可b.window ...
- ANT 的使用
概述 ant 是一个将软件编译.测试.部署等步骤联系在一起加以自动化的一个工具,大多用于 Java 环境中的软件开发. 在与 Jmeter 生成的 jmx 文件配合使用中,ant 会完成jmx计划的执 ...
- 实验吧——你真的会PHP吗？（intval范围 php中\00的利用）
题目地址:http://ctf5.shiyanbar.com/web/PHP/index.php 抓包在header中发现提示 访问得到源码 <?php $info = "" ...
- 【转载】Gradle学习 第十一章：使用Gradle命令行
转载地址:http://ask.android-studio.org/?/article/94 This chapter introduces the basics of the Gradle com ...
- Linux使用svn在github上下载部分文件(单个文件夹)
1.安装svn sudo apt-get update sudo apt-get install subversion 2.输入命令 svn checkout (url) 这里url是github上要 ...
- 大数据技术原理与应用【第五讲】NoSQL数据库：5.6 文档数据库MongoDB
文档数据库介于关系数据库和NoSql之间: 是最像关系数据库的一款产品,也是当前最热门的一款产品. 1.MongoDB简介: 1) 2)文档类型BSON(Binary JSON),结构类似 ...
- HTML元素脱离文档流的三种方法
一.什么是文档流? 将窗体自上而下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流. 这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中 ...