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

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>

运行结果：

时间： 2024-09-01 16:18:16

js处理json以及字符串的比较等常用操作_javascript技巧的相关文章

js两种拼接字符串的简单方法(必看)_javascript技巧

如下所示: function(msgArr) { var len = msgArr.length; var n = 0 ; var htmlSpan = ""; for (var j = 0; j < len - 1; j++) { htmlSpan += '<span>·</span>'; } htmlSpan += '<span class="on">·</span>'; var imgs = []; var

JS中对象与字符串的互相转换详解_javascript技巧

在使用 JSON2.JS 文件的 JSON.parse(data) 方法时候,碰到了问题: throw new SyntaxError('JSON.parse'); 查询资料,大概意思如下: JSON.parse方法在遇到不可解析的字符串时,会抛出SyntaxError异常. 即:JSON.parse(text, reviver),This method parses a JSON text to produce an object or array. t can throw a SyntaxE

JS使用正则表达式除去字符串中重复字符的方法_javascript技巧

本文实例讲述了JS使用正则表达式除去字符串中重复字符的方法.分享给大家供大家参考,具体如下: 这里演示一个简单的JavaScript正则表达式实例,将一串含有重复字符串中的多余字符滤除掉,请运行查看效果. 具体代码如下: <html> <head> <title>利用正则表达法除去字符串中的重复字符</title> </head> <body> <script language="javascript">

js解析json读取List中的实体对象示例_javascript技巧

1.由后台action 传给前台是需要将map 转成json格式 复制代码 代码如下: Map<String, List> resultMap: JSONObject json = JSONObject.fromObject(resultMap); message = json.toString(); List中存放多个student对象 2.前台js 中先将结果json串转成对象 复制代码 代码如下: var obj = eval("("+data+")&quo

js将json格式内容转换成对象的方法_javascript技巧

复制代码 代码如下: {"options":"[{\"text\":\"王家湾\",\"value\":\"9\"},{\"text\":\"李家湾\",\"valu e\":\"10\"},{\"text\":\"邵家湾\",\"value\":\"

js 截取或者替换字符串中的数字实现方法_javascript技巧

在js操作表格时,我们经常会需要得到或者修改name中的下标,如:name="cust[1]/custName"; 替换:name.replace(/[\d]+/,num); //num为你需要替换成的数字变量 获取:name.match(/[\d]+/). 获取多个:name.match(/[\d]+/g).

使用js完成节点的增删改复制等的操作_javascript技巧

需求:完成节点的增删改复制的操作 用到的方法和属性: 1.获取某个节点的父节点 parentNode属性 2.获取某个节点的子节点集合 childNodes属性 3.创键一个新的节点 createTextNode(节点文本内容) document对象的方法 在某些浏览器上兼容性不是很好 createElement(对象) document对象的方法 例如:document.createElement("a"); 4.给某个节点对象添加属性和属性值 setAttribute(属性,属性值

在JS中将JSON的字符串解析成JSON数据格式一般有两种方式

在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 第一种解析方式:使用eval函数来解析,并且使用jQuery的each方法来遍历 用jQuery解析JSON数据的方法,作为jQuery异步请求的传输对象,jQuery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明. 这里首先

探讨js字符串数组拼接的性能问题_javascript技巧

我们知道,在js中,字符串连接是性能最低的操作之一. 例如: 复制代码 代码如下: var text="Hello";  text+=" World!";  早期浏览器没有对这种运算进行优化. 由于字符串是不可变的,这意味着要创建中间字符串来存储连接的结果.频繁地在后台创建和销毁字符串导制性能异常低下. 因此,可以利用数组对象进行优化. 例如: var buffer=[],i=0; buffer[i++]="Hello"; //通过相应索引值添加