js处理json以及字符串的比较等常用操作


Posted in Javascript onSeptember 08, 2013

js处理json格式的插入、修改、删除,以及字符串的比较等常用操作

demo 1:
json格式的插入、删除

<html> 
<head> 
<title></title> 
<script language="javascript"> 
function change(){ 
var obj=document.getElementById("floor"); 
if (document.getElementById("qu").value=="1"){ 
var t=document.createElement("OPTION"); 
t.text="第五楼"; 
t.value="5"; 
obj.add(t); 
}else if(document.getElementById("qu").value=="2"){ 
for(var i=0; i<obj.length;i++){ 
if(obj.options[i].value=="5"){ 
obj.remove(i); 
return; 
} 
} 
} 
} 
</script> 
</head> 
<body> 
<form id="form1" name="form1" method="post" action=""> <select multiple="multiple" name="qu" id="qu" onchange="change()" style="width: 150px; height: 300px;"> 
<option value="请选择所在区">--请选择所在区--</option> 
<option value="1">南开区</option> 
<option value="2">红桥区</option> 
</select> 
<select multiple="multiple" name="floor" id="floor" style="width: 150px; height: 300px;"> 
<option value="请选择楼层">--请选择楼层--</option> 
<option value="1">第一楼</option> 
<option value="2">第二楼</option> 
<option value="3">第三楼</option> 
<option value="4">第四楼</option> 
</select> 
</form> 
</body> 
</html>

运行结果:
js处理json以及字符串的比较等常用操作 
demo2:
<!DOCTYPE html> 
<html> 
<script language="javascript"> 
function toLeft() { 
var list1 = document.getElementById("list1"); 
var list2 = document.getElementById("list2"); for (var i = list2.options.length-1; i >= 0 ; i--) { 
if(list2.options[i].selected ==true){ 
var op = document.createElement("option"); 
op.text = list2.options[i].text; 
op.value = list2.options[i].value; 
list1.add(op); 
list2.remove(i); 
} 
} 
} 
function toRight() { 
var list1 = document.getElementById("list1"); 
var list2 = document.getElementById("list2"); 
for (var i = list1.options.length-1; i >= 0 ; i--) { 
if(list1.options[i].selected ==true){ 
var op = document.createElement("option"); 
op.text = list1.options[i].text; 
op.value = list1.options[i].value; 
list2.add(op); 
list1.remove(i); 
} 
} 
} 
function submit() { 
var list2 = document.getElementById("list2"); 
var innerStr = ""; 
for (var i = 0; i < list2.options.length; i++) { 
innerStr += i + " - " + list2.options[i].text + " : " + list2.options[i].value + "</br>"; 
} 
var wt = document.getElementById("wt"); 
wt.innerHTML = innerStr; 
} 
</script> 
</head> 
<body> 
<div> 
<select multiple="multiple" id="list1" style="width: 500px; height: 100px;> 
<option value="volvo">Volvo</option> 
<option value="saab">Saab</option> 
<option value="opel">Opel</option> 
<option value="audi">Audi</option> 
</select> 
<input type="button" value=">" onclick="toRight();submit()"/> 
<input type="button" value="<" onclick="toLeft();submit()"/> 
<select multiple="multiple" id="list2" style="width: 500px; height: 100px;> 
<option value="volvo">Volvo</option> 
<option value="saab">Saab</option> 
<option value="opel">Opel</option> 
<option value="audi">Audi</option> 
</select> 
<input type="button" value="submit" onclick="submit()"/> 
<div id="wt"/></div> 
</body> 
</html>

运行结果:
js处理json以及字符串的比较等常用操作 
Demo 3:

json元素的插入、修改、删除,以及与字符串的转化格式

<html> 
<head> 
<title>IT-Homer demo</title> 
</head> <body> 
<input type="button" id="parse" value="parse json" onclick="parseJson()" /> 
<div id="txt" /> 
<script type="text/javascript"> 
function parseJson(){ 
var txt = document.getElementById("txt"); 
var jsonData = '{"name":"it-homer","age":25}'; 
var field = ""; 
if(jsonData.length <= 0){ 
jsonData = '{}'; 
} 
var jsonObj = JSON.parse(jsonData); // ok 
// var jsonObj = eval('(' + jsonData + ')'); // ok 
// var jsonObj = jsonData.parseJSON(); // error 
field += "name = " + jsonObj.name; 
field += ", age = " + jsonObj.age; 
jsonObj["sex"] = "boy"; // add json, {"name":"it-homer","age":25,"sex":"boy"} 
// createJson(jsonObj, "sex", "boy"); 
jsonData = JSON.stringify(jsonObj); // ok 
// jsonData = jsonObj.toJSONString(); // error 
var sex = ""; 
if(jsonObj.length > 0) { 
sex = jsonObj.sex; 
} 
txt.innerHTML = field + "</br>" + jsonData; 
} 
function createJson(jsonObj, key, value){ 
if(typeof value === "undefined"){ 
delete jsonObj[key]; 
} else { 
jsonObj[key] = value; 
} 
} 
</script> 
</body> 
</html>

运行结果:
js处理json以及字符串的比较等常用操作 
Demo4:

比较两个字符串不同的元素并打印出来,其中两个字符串是包含关系,即一个字符串一定是另一个字符串的子串,如{1,2,4}是{1,2,3,4,5}的子串

<html> 
<head> 
<title>IT-Homer demo</title> 
</head> <body> 
<input type="button" id="parse" value="parse json" onclick="parseJson222()" /> 
<div id="txt" /> 
<script type="text/javascript"> 
function parseJson222(){ 
var txt = document.getElementById("txt"); 
// var jsonData_old = '_2,4,_4,21,_5,22,8,_7,23,_9,11,12,13,61'; 
// var jsonData_new = '_2,_3,1,2,3,4,_4,21,_5,22,_6,5,6,7,8,_7,23,_9,11,12,13,14,-1,61'; 
var jsonData_new = '_2,4,_4,21,_5,22,8,_7,23,_9,11,12,13,61'; 
var jsonData_old = '_2,_3,1,2,3,4,_4,21,_5,22,_6,5,6,7,8,_7,23,_9,11,12,13,14,-1,61'; 
var diff = diffJson(jsonData_old, jsonData_new); 
txt.innerHTML = diff; 
printArray("diff", diff); 
} 
function diffJson(jsonData_old, jsonData_new){ 
var diff = ""; 
var oldArray = jsonData_old.split(","); 
var newArray = jsonData_new.split(","); 
var oldLen = oldArray.length; 
var newLen = newArray.length; 
var minLen = Math.min(oldLen, newLen); 
if(minLen == newLen){ 
tmpArray = newArray; // swap array 
newArray = oldArray; 
oldArray = tmpArray; 
newLen = oldLen; // swap array length 
oldLen = minLen; 
} 
printArray("newArray", newArray); 
printArray("oldArray", oldArray); 
var arr = []; 
for(i=0; i<newLen; i++){ 
var j=0; 
for(j=0; j<oldLen; j++){ 
if(newArray[i] == oldArray[j]){ 
break; 
} 
} 
if(j == oldLen){ 
arr.push(newArray[i]); 
} 
} 
return arr; 
} 
function printArray(tag, arr){ 
var len = arr.length; 
document.write("<br>"); 
document.write(tag + " : " + arr.toString()); 
} 
</script> 
</body> 
</html>

运行结果:
js处理json以及字符串的比较等常用操作 
Demo5:
<html> 
<head> 
<title>hello</title> 
<style type="text/css"> 
#adddelTextId{ 
float: clean; 
} normal { 
font-style: normal; 
color: #000000; 
} 
add { 
font-style: normal; 
color: #cc0000; 
} 
del { 
font-style: normal; 
color: #0000ff; 
text-decoration: line-through; 
} 
</style> 
</head> 
<body onload="initLoad()"> 
<textarea id="textareaId" name="aaa" cols="50" rows="5" > 
</textarea><br /> 
<div> 
<div id="normalTextId" style="float:left">我,喜,欢</div> 
<add><div id="addTextId" style="float:left">,你</div></add> 
<del><div id="delTextId">,做,朋,友</div></del> 
</div> 
<input type="button" value="click me" onclick="hh()"> 
<script language="javascript"> 
var textareaId = document.getElementById("textareaId"); 
var adddelTextId = document.getElementById("adddelTextId"); 
var normalTextId = document.getElementById("normalTextId"); 
var addTextId = document.getElementById("addTextId"); 
var delTextId = document.getElementById("delTextId"); 
function initLoad(){ 
adddelText = normalTextId.innerHTML + addTextId.innerHTML; 
textareaId.innerHTML = adddelText; 
} 
function hh(){ 
adddelTextFunc(true, ",IT-Homer"); 
adddelTextFunc(false, ",Sunboy_2050"); 
} 
function adddelTextFunc(isAdd, txt){ 
if(isAdd){ // add 
addTextId.innerHTML = txt; 
} else { // del 
delTextId.innerHTML = txt; 
} 
adddelText = normalTextId.innerHTML + addTextId.innerHTML; 
textareaId.innerHTML = adddelText; 
} 
</script> 
</body> 
</html>

运行结果:
js处理json以及字符串的比较等常用操作
Javascript 相关文章推荐
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 Javascript
jQuery 方法大全方便学习参考
Feb 25 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 Javascript
Javascript 面向对象(二)封装代码
May 23 Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 Javascript
jQuery简单验证上传文件大小及类型的方法
Jun 02 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 Javascript
jQuery实现图片切换效果
Oct 19 jQuery
Jquery.addClass始终无效原因分析
Sep 08 #Javascript
jquery选择器、属性设置用法经验总结
Sep 08 #Javascript
jQuery让控件左右移动的三种实现方法
Sep 08 #Javascript
将Datatable转化成json发送前台实现思路
Sep 06 #Javascript
json数据的列循环示例
Sep 06 #Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 #Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 #Javascript
You might like
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
WordPress网站性能优化指南
2015/11/18 PHP
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
JavaScript定时显示广告代码分享
2015/03/02 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
Vue 配合eiement动态路由,权限验证的方法
2018/09/26 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
在Python的setuptools框架下生成egg的教程
2015/04/13 Python
详解Django通用视图中的函数包装
2015/07/21 Python
django批量导入xml数据
2016/10/16 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
python 日期操作类代码
2018/05/05 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
工程类专业自荐信范文
2014/03/09 职场文书
学校门卫岗位职责
2014/03/16 职场文书
电子商务专业毕业生自荐书
2014/06/22 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
人工作失职检讨书
2015/05/05 职场文书
大学迎新生欢迎词
2015/09/29 职场文书