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

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>

运行结果:
 
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>

运行结果:
 
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>

运行结果:
 
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>

运行结果:
 
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>

运行结果:

(0)

相关推荐

  • 浅谈JS中的三种字符串连接方式及其性能比较

    工作中经常会碰到要把2个或多个字符串连接成一个字符串的问题,在JS中处理这类问题一般有三种方法,这里将它们一一列出顺便也对它们的性能做个具体的比较. 第一种方法 用连接符"+"把要连接的字符串连起来: str="a"; str+="b"; 毫无疑问,这种方法是最便捷快速的,如果只连接100个以下的字符串建议用这种方法最方便. 第二种方法 以数组作为中介用 join 连接字符串: var arr=new Array(); arr.push(a);

  • js字符串截取函数slice、substring和substr的比较

    在js中字符截取函数有常用的三个slice().substring().substr()了,下面我来给大家介绍slice().substring().substr()函数在字符截取时的一些用法与区别吧. 取字符串的三个函数:slice(start,[end]),substring(start,[end])和substr(start,[length]) 相关属性: slice() 第一个参数代表开始位置,第二个参数代表结束位置的下一个位置,截取出来的字符串的长度为第二个参数与第一个参数之间的差;若

  • javascript 两个字符串比较函数

    Untitled function diff(){ var s = f.s1.value; var s1 = f.s2.value; document.write("s: " + s + ""); document.write("s1: " + s1 + ""); function sort(s, a){ for(i=0; i list1[n]){ l[j] = list1[n]; if (n [Ctrl+A 全选 注:如需引

  • js去字符串前后空格5种实现方法及比较

    我们在项目中如果写到注册的时候,用户输入空格,我们怎么来剔除空格呢? 下面是我经常用到的js与大家分享下: 第一种:循环检查替换 [javascript] 复制代码 代码如下: //供使用者调用 function trim(s){ return trimRight(trimLeft(s)); } //去掉左边的空白 function trimLeft(s){ if(s == null) { return ""; } var whitespace = new String("

  • javascript的字符串按引用复制和传递,按值来比较介绍与应用

    按值和按引用的比较 Numbers 和 Boolean 类型的值 (true 和 false) 是按值来复制.传递和比较的.当按值复制或传递时,将在计算机内存中分配一块空间并将原值复制到其中.然后,即使更改原来的值,也不会影响所复制的值(反过来也一样),因为这两个值是独立的实体. 对象.数组以及函数是按引用来复制.传递和比较的. 当按地址复制或传递时,实际是创建一个指向原始项的指针,然后就像拷贝一样来使用该指针.如果随后更改原始项,则将同时更改原始项和复制项(反过来也一样).实际上只有一个实体:

  • JS实现的用来对比两个用指定分隔符分割的字符串是否相同

    比较2个字符串内元素的不同(字符1, 字符2, 分隔符可选) 文件: diff.js // 示例用法 /* var str1 = "tie, mao, 55"; var str2 = "tie, mao, csdn"; var result = diff(str1, str2, ','); // 对象 var rs = "" + result; // " 55, csdn" var df1 = result.diff1; //

  • JavaScript 解析Json字符串的性能比较分析代码

    解析时用到的方法一般是eval或者new function,而目前IE8和Firefox3.1又内置了原生的JSON对象(据说会有一定的性能提升).那我们在实际使用的时候怎样从这三种方法(因为性能问题,不考虑用javascript实现的解析)里面来选择呢?面对众多的浏览器,哪种方式的性能是最好的呢? 一.测试方法 1.首先指定测试次数及JSON字符串 复制代码 代码如下: var count = 10000, o = null, i = 0, jsonString = '{"value"

  • JS实现快速比较两个字符串中包含有相同数字的方法

    本文实例讲述了JS实现快速比较两个字符串中包含有相同数字的方法.分享给大家供大家参考,具体如下: 有两个字符串: $a = "5,8,0"; $b = "8,0,5"; 怎样快速比较这两个字符串包含的数字是相同的,其中分隔符都是相同的,只是数字的排序不一样,两个字符串长度是一样的 js代码: 方法一: var s1 = "5,0,8"; var s2 = "8,0,5"; if(s1.split(",").

  • javascript中比较字符串是否相等的方法

    网上看了很多,比如==.equals都不行 还是外国网站给力,发现了方法. http://stackoverflow.com/questions/2167602/optimum-way-to-compare-strings-in-javascript用string_a.localeCompare(string_b) 方法去做:它会返回3个值0:字符串相等-1:字符串string_a<string_b.1:字符串string_a>string_b大家以后就可以使用正确的方法比较字符串了.

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

    js处理json格式的插入.修改.删除,以及字符串的比较等常用操作 demo 1: json格式的插入.删除 复制代码 代码如下: <html> <head> <title></title> <script language="javascript"> function change(){ var obj=document.getElementById("floor"); if (document.getE

  • JS实现json对象数组按对象属性排序操作示例

    本文实例讲述了JS实现json对象数组按对象属性排序操作.分享给大家供大家参考,具体如下: 在实际工作经常会出现这样一个问题:后台返回一个数组中有i个json数据,需要我们根据json中某一项进行数组的排序. 例如返回的数据结构大概是这样: { result:[ {id:1,name:'中国银行'}, {id:3,name:'北京银行'}, {id:2,name:'河北银行'}, {id:10,name:'保定银行'}, {id:7,name:'涞水银行'} ] } 现在我们根据业务需要,要根据

  • 浅谈python中列表、字符串、字典的常用操作

    列表操作如此下: a = ["haha","xixi","baba"] 增:a.append[gg] a.insert[1,gg] 在下标为1的地方,新增 gg 删:a.remove(haha) 删除列表中从左往右,第一个匹配到的 haha del a.[0] 删除下标为0 对应的值 a.pop(0) 括号里不写内容,默认删除最后一个,写了,就删除对应下标的内容 改:a.[0] = "gg" 查:a[0] a.index(&q

  • linux shell字符串内置的常用操作(获取长度、查找、替换)

    之前我们也发过相关的文章.这里呢,推荐大家使用一些内置的函数. 在编写shell程序时,经常会涉及到字符串相关操作.有许多命令语句,如awk,sed都能够做字符串各种操作. 事实上shell内置一系列操作符号,能够达到相似效果,使用内部操作符会省略启动外部程序等时间,因此速度会很的快.如果内置的操作符能够做到的,优先使用内置的. 1 读取字符串值 表达式 含义 ${var} 变量var本来的值 ${var-default} var没声明返回default,但不改变var的值 ${var:-def

  • JavaScrip将数组转为对象与JSON对象字符串转数组方法详解

    JavaScrip将数组转为对象(JS数组转对象工作经常用) 我想获取一个元素数组,并将它们转换为一个对象.数组中的元素需要是对象的键,带有一些默认的空字符串,作为以后要更改的值. ['name','age','city', 'town', 'country'] { name: "", age: "", city: "", town: "", country: "" } 最后我发现我们可以使用数组的redu

  • js 转json格式的字符串为对象或数组(前后台)的方法

    一.前台 // 转换成对象 var myObject = JSON.parse(_data); alert("对象:"+myObject.msg); // 转换成数组 var myobj = eval("["+_data+"]"); for (var i = 0; i < myobj.length; i++) { alert("数组:"+myobj[i].msg); } //把json格式的字符串转成JSON对象 var

  • js中json对象和字符串的理解及相互转化操作实现方法

    本文实例讲述了js中json对象和字符串的理解及相互转化操作实现方法.分享给大家供大家参考,具体如下: <script> var str="{'strv':["+ "{'a':'a11'},"+ " {'a':'b222'}"+ " ]}"; //如果放在一行更清楚:var str="{'strv':[{'a':'a11'}, {'a':'b222'} ]}"; var str2=eval('(

  • JS中的数组转变成JSON格式字符串的方法

    有一个JS数组,如: var arr = [["projectname1","projectnumber1"],["projectname2","projectnumber2"],["projectname3","projectnumber3"]]; 想将此数组转换成JSON字符串,如: var jsonarr = [{"projectname":projectnam

  • 详解JavaScript中js对象与JSON格式字符串的相互转换

    首先我们来看一下js中JSON格式的字符串 var JSONStr1 = "{\"name\" : \"张三\"}"; 注意以下的写法不是js中JSON格式的字符串,它只是一个js的字符串. var JSONStr2 = "{'name' : '张三'}"; 我们看JSON语法中对于字符串的定义:是由双引号包围的任意数量Unicode字符的集合,使用反斜线转义.一个字符(character)即一个单独的字符串(characte

  • JS实现将二维数组转为json格式字符串操作示例

    本文实例讲述了JS实现将二维数组转为json格式字符串操作.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>json</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js

随机推荐