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 相关文章推荐
javascript 不间断的图片滚动并可点击
Jan 15 Javascript
js锁屏解屏通过对$.ajax进行封装实现
Jul 31 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 Javascript
JavaScript实现简单评论功能
Aug 17 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 Javascript
解决Layui 表单提交数据为空的问题
Aug 15 Javascript
详解vue 项目白屏解决方案
Oct 31 Javascript
微信小程序实现无限滚动列表
May 29 Javascript
js module大战
Apr 19 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 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 sdk文档处理常用代码示例解析
2020/12/09 PHP
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
剖析Python的Twisted框架的核心特性
2016/05/25 Python
同时安装Python2 &amp; Python3 cmd下版本自由选择的方法
2017/12/09 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
联想英国官网:Lenovo英国
2019/07/17 全球购物
硕士研究生个人求职信
2013/12/04 职场文书
社区志愿者心得体会
2014/01/03 职场文书
一份创业计划书范文
2014/02/08 职场文书
追悼会主持词
2014/03/20 职场文书
学校教研活动总结
2014/07/02 职场文书
争先创优活动总结
2014/08/27 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
自主招生学校推荐信
2014/09/26 职场文书
铁人观后感
2015/06/16 职场文书
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL