Common Operations such as json format insertion, modification, deletion, and string comparison in js
Demo 1:
Insert or delete data in json format
Copy codeThe Code is as follows:
<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 = "Fifth floor ";
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 = "select region"> -- select region -- </option>
<Option value = "1"> Nankai district </option>
<Option value = "2"> Hongqiao district </option>
</Select>
<Select multiple = "multiple" name = "floor" id = "floor" style = "width: 150px; height: 300px;">
<Option value = "select floor"> -- select floor -- </option>
<Option value = "1"> first floor </option>
<Option value = "2"> second floor </option>
<Option value = "3"> third floor </option>
<Option value = "4"> fourth floor </option>
</Select>
</Form>
</Body>
</Html>
Running result:
Demo2:
Copy codeThe Code is as follows:
<! 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>
Running result:
Demo 3:
Insert, modify, delete, and convert json elements into strings.
Copy codeThe Code is as follows:
<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>
Running result:
Demo4:
Compare the elements of two strings and print them out. The two strings are contained, that is, a string must be a substring of another string, for example, {1, 2, 4} is {1, 2, 3, 4, 5} substring
Copy codeThe Code is as follows:
<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, 21, _ 5, 22, 8, _ 7, 23, _ 9, 11, 12, 13, 61 ';
// Var jsonData_new = '_ 2, _ 3, 1, 2, 3, 4, _ 4, 21, _ 5, _ 6, 6, 7, 8, _ 7, 23, _ 9, 11, 12, 13, 14, -1, 61 ';
Var jsonData_new = '_ 2, 4, 21, _ 5, 22, 8, _ 7, 23, _ 9, 11, 12, 13, 61 ';
Var jsonData_old = '_ 2, _ 3, 1, 2, 3, 4, _ 4, 21, _ 5, _ 6, 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>
Running result:
Demo5:
Copy codeThe Code is as follows:
<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"> I, hi, Huan </div>
<Add> <div id = "addTextId" style = "float: left">, you </div> </add>
<Del> <div id = "delTextId">, do, friend, friend </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>
Running result: