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 相关文章推荐
event.keyCode键码值表 附只能输入特定的字符串代码
May 15 Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
Jan 28 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 Javascript
JS实现网站吸顶条
Jan 08 Javascript
javascript实现简单页面倒计时
Mar 02 Javascript
React服务端渲染原理解析与实践
Mar 04 Javascript
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
php下载excel无法打开的解决方法
2013/12/24 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
ie和firefox中img对象区别的困惑
2006/12/27 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
2009/11/24 Javascript
浅析js封装和作用域
2013/07/09 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
javascript实现列表切换效果
2016/05/02 Javascript
实现JavaScript的组成----BOM和DOM详解
2016/05/18 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
解决DataFrame排序sort的问题
2018/06/07 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
Python爬虫爬取新闻资讯案例详解
2020/07/14 Python
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
大学军训感言200字
2014/02/26 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
2014年业务工作总结
2014/11/17 职场文书
八一建军节慰问信
2015/02/14 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
个人工作总结(管理人员)范文
2019/08/13 职场文书