js处理json和字符串示例

最新推荐文章于 2024-04-10 18:24:39 发布
最新推荐文章于 2024-04-10 18:24:39 发布
阅读量120 收藏
点赞数
文章标签： json javascript ViewUI

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" οnchange="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>
运行结果：




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=">" οnclick="toRight();submit()"/>  
<input type="button" value="<" οnclick="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" οnclick="submit()"/>
<div id="wt"/></div>

</body>
</html>

运行结果：



Demo 3：

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

<html>
<head>
<title>IT-Homer demo</title>
</head>

<body>
	<input type="button" id="parse" value="parse json" οnclick="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>
运行结果：




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" οnclick="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>
运行结果：



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 οnlοad="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" οnclick="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 数组Array用法

26 个 jQuery使用技巧


Dynatree - Example Browser

jquery-fileTree

zTree

js 将json与String互转


qq_33974741
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js处理json以及字符串的比较等常用操作
10-26
js处理json格式的插入、修改、删除，以及字符串的比较等常用操作，下面有五个示例，感兴趣的朋友可以学习下
JSON.parse(data)后追加数组
weixin_41572561的博客
07-19 761
var dat=JSON.parse(data); dat.splice(dat.length, 0, {value:"工程部"}); dat.splice(dat.length, 0, {value:"物...
javascript json 添加 修改 删除 的操作
掬水月在手，弄花香满衣
12-30 219
[code="java"] //下面的操作中可能需要这三个函数我先放到这 //转换为json function $parseJson(str){ try{ eval('var obj='+str); return obj; }catch(e){ return null; } } //数组转换为字符串 function $ArrayToString...
js 操作json总结
安卓世界库
08-22 2644
/str_pretty1是json格式的字符串jobj即为json对象。JSON.stringify() 用于将 JavaScript 值转换为 JSON 字符串。a.取得key值的三种方式：1.jobj.key,2.jobj[key]3.jobj['key']JSON.parse() 用于将一个 JSON 字符串转换为 JavaScript 对象。2.json字符串转为json对象。1.js值转为json字符串。
JS中的JSON（秒懂如何操作JSON）
最新发布
百赢出品，必属精品
04-10 1779
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它基于JavaScript的语法子集，但是独立于编程语言。JSON格式可以用来在网络中传输数据，也可以存储数据。JSON采用键值对的方式表示数据，其中键是字符串，值可以是字符串、数字、布尔值、数组、对象或者null。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于在不同系统之间进行数据传输和存储。格式JSON采用键值对的方式存储数据。
js对json数据的操作,fromjson用法详解
aifans_bert的博客
09-11 4386
var json = [{"id":"中","rowid":"华","kk":"66"},{"id":"美","rowid":"美丽","kk":"22"}] let arr = [];用eval函数来解析，并且使用jquery的each方法来遍历用jquery解析JSON数据的方法,作为jquery异步请求的传输对象，jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式，对于利用JSONObject等插件封装的JSON对象，与此亦是大同小异，这里不再做说明。
JS实现将二维数组转为json格式字符串操作示例
10-18
主要介绍了JS实现将二维数组转为json格式字符串操作,涉及javascript数组遍历、拼接、转换等相关操作技巧,需要的朋友可以参考下
JavaScript实现的反序列化json字符串操作示例
01-21
本文实例讲述了JavaScript实现的反序列化json字符串操作。分享给大家供大家参考，具体如下： JavaScript中如何反序列化json字符串呢? 有如下两种方法: (1) 使用万能的eval var jsonText = '{name:acwong,age:23,...
Js中对Json对象的操作
qq_36519327的博客
10-18 1447
Js中对Json对象的操作
JavaScript中使用JSON的基本操作示例
weixin_54703767的博客
11-28 299
JSON（JavaScript Object Notation）是一种数据交换格式，也是JavaScript中处理数据的常见方式之一。JSON是一种轻量级的数据交换格式，易于阅读和编写，同时也易于解析和生成。在JavaScript中，可以使用内置的JSON对象来处理JSON数据。
js 处理JSON 格式 数据
lzfengquan的博客
06-09 794
JSON.stringify() JSON.parse()
JavaScript解析json字符串
gaohuanjie的专栏
03-02 2348
JavaScript解析json字符串
JavaScript中的JSON
m0_63077733的博客
07-17 2257
这个例子使用 JSON.stringify()把一个 JavaScript 对象序列化为一个 JSON 字符串，保存在变量 jsonText 中。提供的函数接收两个参数：属性名（key）和属性 值（value）。这个 key 始终是字符串，只是在值 不属于某个键/值对时会是空字符串。即使整个 JSON 对象中有两个属性都叫"name"， 但它们属于两个不同的对象，因此是允许的。JSON 字符串可以直接传给 JSON.parse()，然后得到相应的 JavaScript 值。
10分钟学会js处理json常用方法
weixin_30540691的博客
06-09 1578
一、json定义 JSON ( JavaScript Object Notation) ，它是一串字符串 只不过元素会使用特定的符号标注。 {} 双括号表示对象 [] 中括号表示数组 "" 双引号内是属性或值 : 冒号表示后者是前者的值(这个值可以是字符串、数字、也可以是另一个数组或对象) JSON 语法是 JavaScript 对象表示法语法的子集。数据在名称/值对中、数据由...
JavaScript关于JSON字符串的相关操作
火星基地
04-01 1799
JSON.stringify 语法 JSON.stringify(value[, replacer [, space]]) value：将要序列化成 一个 JSON 字符串的值 replacer：如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。 space：指定缩进用的空白字符串，美化输出。 举例 如下
json串的简单实例
hhtq的博客
03-21 2740
1.创建实体对象Book.java package entity; public class Book { private int bookId; private String bookName; private String bookPress; public int getBookId() { return bookId; } public void setBookId(i
JavaScript操作JSON实用方法、JSON、parse、stringify
11-17 1049
JavaScript操作JSON实用方法、JSON、parse、stringify
【JavaScript】特殊格式的字符串—— JSON
ztK63LrD的博客
08-04 5023
一文了解 JSON 操作
JSON字符串
chenjing_1qaz的博客
08-15 876
现在越来越多的项目和开发插件等默认都会支持和使用json数据格式，作为数据保持、传输的一种方式。 说是其中一种，就标示还有好多其他格式。比如：最多是xml。webservice的标准数据格式。 不过由于json是JavaScript 对象表示法（JavaScript Object Notation），天生就对js支持很好， 所以现在很多的ajax等都使用json，反而会更好处理一些。 1、定义 什...
js处理json字符串拼接
06-01
如果你要将多个 JSON 字符串拼接成一个大的 JSON 字符串，可以先将每个 JSON 字符串转成 JavaScript 对象，然后将这些对象放到一个数组中，最后使用 JSON.stringify() 方法将整个数组转成 JSON 字符串。示例代码如下...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值