当前位置： 首页 > news >正文

JS对象与JSON转换全解析

news 2025/8/21 8:45:55

1. JS对象和JSON格式

1.1 JS声明对象的语法

语法1： 通过 new Object() 直接创建对象

var person =new Object();var person ={"属性名":"属性值","属性名","属性值","函数名":函数}

语法2： 通过 {} 形式创建对象

var person ={"name":"张小明","age":10,"foods":["苹果","香蕉","橘子","葡萄"],"eat":function (){console.log(this.age+"岁的"+this.name+"喜欢吃:")for(var i = 0;i<this.foods.length;i++){console.log(this.foods[i])} }
}
//获得对象属性值
console.log(person.name)
console.log(person.age)
//调用对象方法
person.eat();

1.2 JSON格式

JSON的语法

​ var obj="{'属性名':'属性值','属性名':{'属性名':'属性值'},'属性名':['值1','值1','值3']}"

  • JSON字符串一般用于传递数据

  • 通过 JSON.parse() 方法可以将一个JSON串转换成对象

  • 通过 JSON.stringify() 方法可以将一个对象转换成一个JSON格式的字符串

/* 定义一个JSON格式的字符串 */
var personStr ='{"name":"张小明","age":20,"girlFriend":{"name":"铁铃","age":23},"foods":["苹果","香蕉","橘子","葡萄"],"pets":[{"petName":"大黄","petType":"dog"},{"petName":"小花","petType":"cat"}]
}'console.log(personStr)
console.log(typeof personStr)/* 将一个JSON串转换为对象 */
var person = JSON.parse(personStr);
console.log(person)
console.log(typeof person)/* 获取对象属性值 */
console.log(person.name)
console.log(person.age)
console.log(person.girlFriend.name)
console.log(person.foods[1])
console.log(person.pets[1].petName)
console.log(person.pets[1].petType)/* 将对象转换成JSON字符串 */
var personStr = JSON.stringify(person)
console.log(personStr)
console.log(typeof personStr)

1.3 JSON与Java对象之间的转换

// 实例化Person对象 将Person对象转换为JSON串
Dog dog = new Dog("小黄")
Person person = new Person("张三", 10, dog)// 将Person对象转换成一个字符串 Gson Jackson Fastjson
// 创建Jackson的ObjectMapper实例（用于JSON序列化/反序列化）
ObejctMapper obj = new ObjectMapper();// 将Person对象转换为JSON字符串
String personStr = obj.writeValueAsString(person);
System.out.println(personStr)// 将字符串转换为对象
String personstr = "{\"name\":\"张三\",\"age\":10,\"dog\":{\"name\":\"小黄\"}}"
ObjectMapper obj = new objectMapper();    // 创建新的ObjectMapper实例
Person person = obj.readValue(personStr, Person.class);  // 将JSON字符串转换为Person对象
System.out.println(person);// Map对象转换成JSON字符串格式
Map data = new HashMap();
data.put("a","valuea");    // 添加键值对
data.put("b","valueb");// 创建ObjectMapper实例
ObjectMapper obj = new objectMapper();
String s  = obj.writeValueAsString(data);    // 将Map转换为JSON字符串
System.out.println(s);// list, array对象转换成JSON字符串格式
List data = new ArrayList();
data.add("a");
data.add("b");
data.add("c");String[] data = {"a","b","c"}ObjectMapper objectMapper = new objectMapper();
String s = objectMapper.writeValueAsString(data);
System.out.println(s);

2. 事件的绑定

2.1 常见事件

鼠标事件

属性描述
onclick当用户点击某个对象时调用的事件句柄
oncontextmenu在用户点击鼠标右键打开上下文菜单时触发
ondblclick当用户双击某个对象时调用的事件句柄
onmousedown鼠标按钮被按下
onmouseenter当鼠标指针移动到元素上时触发
onmouseleave当鼠标指针移出元素时触发
onmousemove鼠标被移动
onmouseover鼠标移到某元素之上
onmouseout鼠标从某元素移开
onmouseup鼠标按键被松开

键盘事件

属性描述
onkeydown某个键盘按键被按下
onkeypress某个键盘按键被按下并松开
onkeyup某个键盘按键被松开

表单事件

属性描述
onblur元素失去焦点时触发
onchange该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)
onfocus元素获取焦点时触发
onfocusin元素即将获取焦点时触发
onfocusout元素即将失去焦点时触发
oninput元素获取用户输入时触发
onreset表单重置时触发
onsearch用户向搜索域输入文本时触发 ( <input="search">)
onselect用户选取文本时触发 ( <input> 和 <textarea>)
onsubmit表单提交时触发

2.2 事件的绑定

2.2.1 属性绑定

<head><meta charset="UTF-8"><title>小标题</title><script>function testDown1(){console.log("down1")}function testDown2(){console.log("down2")}function testFocus(){console.log("获得焦点")}function testBlur(){console.log("失去焦点")}function testChange(input){console.log("内容改变")console.log(input.value);}function testMouseOver(){console.log("鼠标悬停")}function testMouseLeave(){console.log("鼠标离开")}function testMouseMove(){console.log("鼠标移动")}</script>
</head><body><input type="text" onkeydown="testDown1(),testDown2()"onfocus="testFocus()" onblur="testBlur()" onchange="testChange(this)"onmouseover="testMouseOver()" onmouseleave="testMouseLeave()" onmousemove="testMouseMove()" />
</body>

  • 通过事件属性绑定函数,在行为发生时会自动执行函数

  • 一个事件可以同时绑定多个函数

  • 一个元素可以同时绑定多个事件

  • 方法中可以传入 this 对象,代表当前元素

2.2.2 表单事件

DOM编程事件触发
    <head><meta charset="UTF-8"><title>小标题</title><script>// 页面加载完毕事件,浏览器加载完整个文档行为window.onload=function(){var in1 =document.getElementById("in1");// 通过DOM编程绑定事件in1.onchange=testChangevar btn1 =document.getElementById("btn1");btn1.onclick=function (){console.log("按钮点击了")// 调用事件方法触发事件in1.onchange()}}function testChange(){console.log("内容改变")console.log(event.target.value);}</script></head><body><input id="in1" type="text" /><br><button id="btn1">按钮</button></body>

3. BOM编程

BOM是Browser Object Model的简写，即浏览器对象模型。BOM由一系列对象组成，是访问、控制、修改浏览器的属性和方法(通过window对象及属性的一系列方法 控制浏览器行为的一种编程)。

BOM没有统一的标准(每种客户端都可以自定标准)。

BOM编程是将浏览器窗口的各个组成部分抽象成各个对象,通过各个对象的API操作组件行为的一种编程。

BOM编程的对象结构如下：window 顶级对象,代表整个浏览器窗口

  • location对象 window对象的属性之一,代表浏览器的地址栏

  • history对象 window对象的属性之一,代表浏览器的访问历史

  • screen对象 window对象的属性之一,代表屏幕

  • navigator对象 window对象的属性之一,代表浏览器软件本身

  • document对象 window对象的属性之一,代表浏览器窗口目前解析的html文档

  • console对象 window对象的属性之一,代表浏览器开发者工具的控制台

  • localStorage对象 window对象的属性之一,代表浏览器的本地数据持久化存储

  • sessionStorage对象 window对象的属性之一,代表浏览器的本地数据会话级存储

window对象的常见属性(了解)

属性描述
closed返回窗口是否已被关闭。
defaultStatus设置或返回窗口状态栏中的默认文本。
document对 Document 对象的只读引用。(请参阅对象)
frames返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架。
history对 History 对象的只读引用。请参数 History 对象。
innerHeight返回窗口的文档显示区的高度。
innerWidth返回窗口的文档显示区的宽度。
localStorage在浏览器中存储 key/value 对。没有过期时间。
length设置或返回窗口中的框架数量。
location用于窗口或框架的 Location 对象。请参阅 Location 对象。
name设置或返回窗口的名称。
navigator对 Navigator 对象的只读引用。请参数 Navigator 对象。
opener返回对创建此窗口的窗口的引用。
outerHeight返回窗口的外部高度，包含工具条与滚动条。
outerWidth返回窗口的外部宽度，包含工具条与滚动条。
pageXOffset设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent返回父窗口。
screen对 Screen 对象的只读引用。请参数 Screen 对象。
screenLeft返回相对于屏幕窗口的x坐标
screenTop返回相对于屏幕窗口的y坐标
screenX返回相对于屏幕窗口的x坐标
sessionStorage在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。
screenY返回相对于屏幕窗口的y坐标
self返回对当前窗口的引用。等价于 Window 属性。
status设置窗口状态栏的文本。
top返回最顶层的父窗口。

window对象的常见方法(了解)

方法描述
alert()显示带有一段消息和一个确认按钮的警告框。
atob()解码一个 base-64 编码的字符串。
btoa()创建一个 base-64 编码的字符串。
blur()把键盘焦点从顶层窗口移开。
clearInterval()取消由 setInterval() 设置的 timeout。
clearTimeout()取消由 setTimeout() 方法设置的 timeout。
close()关闭浏览器窗口。
confirm()显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup()创建一个 pop-up 窗口。
focus()把键盘焦点给予一个窗口。
getSelection()返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
getComputedStyle()获取指定元素的 CSS 样式。
matchMedia()该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。
moveBy()可相对窗口的当前坐标把它移动指定的像素。
moveTo()把窗口的左上角移动到一个指定的坐标。
open()打开一个新的浏览器窗口或查找一个已命名的窗口。
print()打印当前窗口的内容。
prompt()显示可提示用户输入的对话框。
resizeBy()按照指定的像素调整窗口的大小。
resizeTo()把窗口的大小调整到指定的宽度和高度。
scroll()已废弃。 该方法已经使用了 scrollTo() 方法来替代。
scrollBy()按照指定的像素值来滚动内容。
scrollTo()把内容滚动到指定的坐标。
setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()在指定的毫秒数后调用函数或计算表达式。
stop()停止页面载入。
postMessage()安全地实现跨源通信。

3.1 BOM编程控制浏览器行为演示

三种弹窗方式

<head><meta charset="UTF-8"><title>小标题</title><script>function testAlert() {//普通信息提示框window.alert("提示信息");}function testConfirm() {// 确认框// window可以省略不写var con = confirm("确定要删除吗?");if (con) {alert("点击了确定")} else {alert("点击了取消")}}function testPrompt() {//信息输入对话框var res = prompt("请输入昵称", "例如:张三");alert("您输入的是:" + res)}</script>
</head>
<body><input type="button" value="提示框" onclick="testAlert()" /> <br><input type="button" value="确认框" onclick="testConfirm()" /> <br><input type="button" value="对话框" onclick="testPrompt()" /> <br>
</body>

页面跳转

<head><meta charset="UTF-8"><title>小标题</title>   <script>function goAtguigu() {var flag = confirm("即将跳转到尚硅谷官网,本页信息即将丢失,确定吗?")if (flag) {// 通过BOM编程地址栏url切换window.location.href = "http://www.atguigu.com"}}</script>
</head><body><input type="button" value="跳转到尚硅谷" onclick="goAtguigu()" /> <br>
</body>

3.2 BOM编程实现会话级和持久级数据存储

  • 会话级数据 : 内存型数据,是浏览器在内存上临时存储的数据,浏览器关闭后,数据失去,通过window的 sessionStorge 属性实现。

  • 持久级数据 : 磁盘型数据,是浏览器在磁盘上持久存储的数据,浏览器关闭后,数据仍在,通过window的 localStorge 实现。

  • 可以用于将来存储一些服务端响应回来的数据,比如:token令牌,或者一些其他功能数据,根据数据的业务范围我们可以选择数据存储的  会话/持久 级别。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>function saveItem(){// 让浏览器存储一些会话级数据window.sessionStorage.setItem("sessionMsg","sessionValue")// 让浏览器存储一些持久级数据window.localStorage.setItem("localMsg","localValue")console.log("haha")}function removeItem(){// 删除数据sessionStorage.removeItem("sessionMsg")localStorage.removeItem("localMsg")}function readItem(){console.log("read")// 读取数据console.log("session:"+sessionStorage.getItem("sessionMsg"))console.log("local:"+localStorage.getItem("localMsg"))}</script>
</head>
<body><button onclick="saveItem()">存储数据</button><button onclick="removeItem()">删除数据</button><button onclick="readItem()">读取数据</button></body>
</html>

    4. DOM编程

    4.1 获取页面元素的几种方式

    4.1.1 整个文档范围内查找元素结点

    功能API返回值
    根据id值查询document.getElementById(“id值”)一个具体的元素节
    根据标签名查询document.getElementsByTagName(“标签名”)元素节点数组
    根据name属性值查询document.getElementsByName(“name值”)元素节点数组
    根据类名查询document.getElementsByClassName("类名")元素节点数组

    4.1.2 具体元素节点范围内查找子节点

    功能API返回值
    查找子标签element.children返回子标签数组
    查找第一个子标签element.firstElementChild标签对象
    查找最后一个子标签element.lastElementChild节点对象

    4.1.3 查找指定子元素节点的父节点

    功能API返回值
    查找指定元素节点的父标签element.parentElement标签对象

    4.1.4 查找指定元素节点的兄弟节点

    功能API返回值
    查找前一个兄弟标签node.previousElementSibling标签对象
    查找后一个兄弟标签node.nextElementSibling标签对象
    
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>/* 1 获得document  dom树window.document2 从document中获取要操作的元素1. 直接获取var el1 =document.getElementById("username") // 根据元素的id值获取页面上唯一的一个元素var els =document.getElementsByTagName("input") // 根据元素的标签名获取多个同名元素var els =document.getElementsByName("aaa") // 根据元素的name属性值获得多个元素var els =document.getElementsByClassName("a") // 根据元素的class属性值获得多个元素2. 间接获取var cs=div01.children // 通过父元素获取全部的子元素var firstChild =div01.firstElementChild  // 通过父元素获取第一个子元素var lastChild = div01.lastElementChild   // 通过父元素获取最后一个子元素var parent = pinput.parentElement  // 通过子元素获取父元素var pElement = pinput.previousElementSibling // 获取前面的第一个元素var nElement = pinput.nextElementSibling // 获取后面的第一个元素3 对元素进行操作1. 操作元素的属性2. 操作元素的样式3. 操作元素的文本4. 增删元素   */function fun1(){//1 获得document//2 通过document获得元素var el1 =document.getElementById("username") // 根据元素的id值获取页面上唯一的一个元素console.log(el1)}function fun2(){var els = document.getElementsByTagName("input") // 根据元素的标签名获取多个同名元素for(var i = 0 ;i < els.length;i++){console.log(els[i])}}function fun3(){var els = document.getElementsByName("aaa") // 根据元素的name属性值获得多个元素console.log(els)for(var i =0;i < els.length;i++){console.log(els[i])}}function fun4(){var els = document.getElementsByClassName("a") // 根据元素的class属性值获得多个元素for(var i =0;i < els.length;i++){console.log(els[i])}}function fun5(){// 先获取父元素var div01 = document.getElementById("div01")// 获取所有子元素var cs=div01.children // 通过父元素获取全部的子元素for(var i = 0;i < cs.length;i++){console.log(cs[i])}console.log(div01.firstElementChild)  // 通过父元素获取第一个子元素console.log(div01.lastElementChild)   // 通过父元素获取最后一个子元素}function fun6(){// 获取子元素var pinput = document.getElementById("password")console.log(pinput.parentElement) // 通过子元素获取父元素}function fun7(){// 获取兄弟元素var pinput = document.getElementById("password")console.log(pinput.previousElementSibling) // 获取前面的第一个元素console.log(pinput.nextElementSibling) // 获取后面的第一个元素}</script>
</head>
<body><div id="div01"><input type="text" class="a" id="username" name="aaa"/><input type="text" class="b" id="password" name="aaa"/><input type="text" class="a" id="email"/><input type="text" class="b" id="address"/></div><input type="text" class="a"/><br><hr><input type="button" value="通过父元素获取子元素" onclick="fun5()" id="btn05"/><input type="button" value="通过子元素获取父元素" onclick="fun6()" id="btn06"/><input type="button" value="通过当前元素获取兄弟元素" onclick="fun7()" id="btn07"/><hr><input type="button" value="根据id获取指定元素" onclick="fun1()" id="btn01"/><input type="button" value="根据标签名获取多个元素" onclick="fun2()" id="btn02"/><input type="button" value="根据name属性值获取多个元素" onclick="fun3()" id="btn03"/><input type="button" value="根据class属性值获得多个元素" onclick="fun4()" id="btn04"/></body>
</html>

    4.2 操作元素属性值

    4.2.1 属性操作

    需求操作方式
    读取属性值元素对象.属性名
    修改属性值元素对象.属性名=新的属性值

    4.2.2 内部文本操作

    需求操作方式
    获取或者设置标签体的文本内容element.innerText
    获取或者设置标签体的内容element.innerHTML
    ​<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>/* 1 获得document  dom树window.document2 对元素进行操作1. 操作元素的属性   元素名.属性名=""2. 操作元素的样式   元素名.style.样式名=""  样式名"-" 要进行驼峰转换3. 操作元素的文本   元素名.innerText   只识别文本元素名.innerHTML   同时可以识别html代码 4. 增删元素   */function changeAttribute(){var in1 = document.getElementById("in1")// 语法 元素.属性名=""// 获得属性值console.log(in1.type)console.log(in1.value)// 修改属性值in1.type ="button"in1.value ="嗨"}function changeStyle(){var in1 = document.getElementById("in1")// 语法  元素.style.样式名=""   原始样式名中的"-"符号 要转换驼峰式  background-color > backgroundColorin1.style.color = "green"in1.style.borderRadius = "5px"}function changeText(){var div01 =document.getElementById("div01")/* 语法  元素名.innerText   只识别文本元素名.innerHTML   同时可以识别html代码*/console.log(div01.innerText)div01.innerHTML="<h1>嗨</h1>"}
​</script><style>#in1{color: red;}</style>
</head>
<body><input id="in1" type="text" value="hello"><div id="div01">hello</div>
​<hr><button onclick="changeAttribute()">操作属性</button><button onclick="changeStyle()">操作样式</button><button onclick="changeText()">操作文本</button></body>
</html>

    4.3 增删元素

    4.3.1 对页面的元素进行增删操作

    API功能
    document.createElement(“标签名”)创建元素节点并返回，但不会自动添加到文档中
    document.createTextNode(“文本值”)创建文本节点并返回，但不会自动添加到文档中
    element.appendChild(ele)将ele添加到element所有子节点后面
    parentEle.insertBefore(newEle,targetEle)将newEle插入到targetEle前面
    parentEle.replaceChild(newEle, oldEle)用新节点替换原有的旧子节点
    element.remove()删除某个标签
    ​<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>/* 1 获得document  dom树window.document4. 增删元素var element =document.createElement("元素名") // 创建元素父元素.appendChild(子元素)               // 在父元素中追加子元素父元素.insertBefore(新元素,参照元素)     // 在某个元素前增加元素父元素.replaceChild(新元素,被替换的元素) // 用新的元素替换某个子子元素元素.remove()                            // 删除当前元素*/function addCs(){// 创建一个新的元素// 创建元素var csli =document.createElement("li") // <li></li>// 设置子元素的属性和文本 <li id="cs">长沙</li>csli.id="cs"csli.innerText="长沙"// 将子元素放入父元素中var cityul =document.getElementById("city")// 在父元素中追加子元素cityul.appendChild(csli)}function addCsBeforeSz(){// 创建一个新的元素// 创建元素var csli =document.createElement("li") // <li></li>// 设置子元素的属性和文本 <li id="cs">长沙</li>csli.id="cs"csli.innerText="长沙"// 将子元素放入父元素中var cityul =document.getElementById("city")// 在父元素中追加子元素//cityul.insertBefore(新元素,参照元素)var szli =document.getElementById("sz")cityul.insertBefore(csli,szli)}
​function replaceSz(){// 创建一个新的元素// 创建元素var csli =document.createElement("li") // <li></li>// 设置子元素的属性和文本 <li id="cs">长沙</li>csli.id="cs"csli.innerText="长沙"// 将子元素放入父元素中var cityul =document.getElementById("city")// 在父元素中追加子元素//cityul.replaceChild(新元素,被替换的元素)var szli =document.getElementById("sz")cityul.replaceChild(csli,szli)}
​function removeSz(){var szli =document.getElementById("sz")// 哪个元素调用了remove该元素就会从dom树中移除szli.remove()}
​function clearCity(){var cityul =document.getElementById("city")
​/* var fc =cityul.firstChildwhile(fc != null ){fc.remove()fc =cityul.firstChild} */cityul.innerHTML=""// 不建议使用，因此此时会把<ul>标签整个删除//cityul.remove()}</script></head>
<body><ul id="city"><li id="bj">北京</li><li id="sh">上海</li><li id="sz">深圳</li><li id="gz">广州</li></ul>
​<hr><!-- 目标1 在城市列表的最后添加一个子标签  <li id="cs">长沙</li>  --><button onclick="addCs()">增加长沙</button><!-- 目标2 在城市列表的深圳前添加一个子标签  <li id="cs">长沙</li>  --><button onclick="addCsBeforeSz()">在深圳前插入长沙</button><!-- 目标3  将城市列表的深圳替换为  <li id="cs">长沙</li>  --><button onclick="replaceSz()">替换深圳</button><!-- 目标4  将城市列表删除深圳  --><button onclick="removeSz()">删除深圳</button><!-- 目标5  清空城市列表  --><button onclick="clearCity()">清空</button></body>
</html>

    5. 正则表达式

    修饰符描述
    i执行对大小写不敏感的匹配。
    g执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
    m执行多行匹配。
    表达式描述
    [abc]查找方括号之间的任何字符。
    [^abc]查找任何不在方括号之间的字符。
    [0-9]查找任何从 0 至 9 的数字。
    [a-z]查找任何从小写 a 到小写 z 的字符。
    [A-Z]查找任何从大写 A 到大写 Z 的字符。
    [A-z]查找任何从大写 A 到小写 z 的字符。
    [adgk]查找给定集合内的任何字符。
    [^adgk]查找给定集合外的任何字符。
    (red|blue|green)查找任何指定的选项。
    元字符描述
    .查找单个字符，除了换行和行结束符。
    \w查找数字、字母及下划线。
    \W查找非单词字符。
    \d查找数字。
    \D查找非数字字符。
    \s查找空白字符。
    \S查找非空白字符。
    \b匹配单词边界。
    \B匹配非单词边界。
    \0查找 NULL 字符。
    \n查找换行符。
    \f查找换页符。
    \r查找回车符。
    \t查找制表符。
    \v查找垂直制表符。
    \xxx查找以八进制数 xxx 规定的字符。
    \xdd查找以十六进制数 dd 规定的字符。
    \uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。
    量词描述
    n+匹配任何包含至少一个 n 的字符串。例如，/a+/ 匹配 "candy" 中的 "a"，"caaaaaaandy" 中所有的 "a"。
    n*匹配任何包含零个或多个 n 的字符串。例如，/bo*/ 匹配 "A ghost booooed" 中的 "boooo"，"A bird warbled" 中的 "b"，但是不匹配 "A goat grunted"。
    n?匹配任何包含零个或一个 n 的字符串。例如，/e?le?/ 匹配 "angel" 中的 "el"，"angle" 中的 "le"。
    n{X}匹配包含 X 个 n 的序列的字符串。例如，/a{2}/ 不匹配 "candy," 中的 "a"，但是匹配 "caandy," 中的两个 "a"，且匹配 "caaandy." 中的前两个 "a"。
    n{X,}X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如，/a{2,}/ 不匹配 "candy" 中的 "a"，但是匹配 "caandy" 和 "caaaaaaandy." 中所有的 "a"。
    n{X,Y}X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。例如，/a{1,3}/ 不匹配 "cndy"，匹配 "candy," 中的 "a"，"caandy," 中的两个 "a"，匹配 "caaaaaaandy" 中的前面三个 "a"。注意，当匹配 "caaaaaaandy" 时，即使原始字符串拥有更多的 "a"，匹配项也是 "aaa"。
    n$匹配任何结尾为 n 的字符串。
    ^n匹配任何开头为 n 的字符串。
    ?=n匹配任何其后紧接指定字符串 n 的字符串。
    ?!n匹配任何其后没有紧接指定字符串 n 的字符串。

    RegExp对象方法

    方法描述
    compile在 1.5 版本中已废弃。 编译正则表达式。
    exec检索字符串中指定的值。返回找到的值，并确定其位置。
    test检索字符串中指定的值。返回 true 或 false。
    toString返回正则表达式的字符串。

    支持正则的String的方法

    方法描述
    search检索与正则表达式相匹配的值。
    match找到一个或多个正则表达式的匹配。
    replace替换与正则表达式匹配的子串。
    split把字符串分割为字符串数组。

    验证

    // 创建一个最简单的正则表达式对象，判断当前字符串中是否有o
var reg = /o/;
// 创建一个字符串对象作为目标字符串
var str = 'Hello World!';
// 调用正则表达式对象的test()方法验证目标字符串是否满足我们指定的这个模式，返回结果true
console.log("/o/.test('Hello World!')="+reg.test(str));

    匹配（默认只匹配第一个）

    // 创建一个最简单的正则表达式对象
var reg = /o/;
// 创建一个字符串对象作为目标字符串
var str = 'Hello World!';
// 在目标字符串中查找匹配的字符，返回匹配结果组成的数组
var resultArr = str.match(reg);
// 数组长度为1
console.log("resultArr.length="+resultArr.length);// 数组内容是o
console.log("resultArr[0]="+resultArr[0]);// 全文匹配，只要有就返回
var reg = /o/g;

    替换

    // 创建一个最简单的正则表达式对象
var reg = /o/;
// 创建一个字符串对象作为目标字符串
var str = 'Hello World!';
var newStr = str.replace(reg,'@');
// 只有第一个o被替换了，说明我们这个正则表达式只能匹配第一个满足的字符串
console.log("str.replace(reg)="+newStr);//Hell@ World!// 原字符串并没有变化，只是返回了一个新字符串
console.log("str="+str);//str=Hello World!

    全文查找

    如果不使用g对正则表达式对象进行修饰，则使用正则表达式进行查找时，仅返回第一个匹配；

    使用g后，返回所有匹配。

    // 目标字符串
var targetStr = 'Hello World!';
​
// 没有使用全局匹配的正则表达式
var reg = /[A-Z]/;
// 获取全部匹配
var resultArr = targetStr.match(reg);
// 数组长度为1
console.log("resultArr.length="+resultArr.length);
// 遍历数组，发现只能得到'H'
for(var i = 0; i < resultArr.length; i++){console.log("resultArr["+i+"]="+resultArr[i]);
}

    对比

    // 目标字符串
var targetStr = 'Hello World!';
// 使用了全局匹配的正则表达式
var reg = /[A-Z]/g;
// 获取全部匹配
var resultArr = targetStr.match(reg);
// 数组长度为2
console.log("resultArr.length="+resultArr.length);
// 遍历数组，发现可以获取到“H”和“W”
for(var i = 0; i < resultArr.length; i++){console.log("resultArr["+i+"]="+resultArr[i]);
}

    忽略大小写

    //目标字符串
var targetStr = 'Hello WORLD!';
​
//没有使用忽略大小写的正则表达式
var reg = /o/g;
//获取全部匹配
var resultArr = targetStr.match(reg);
//数组长度为1
console.log("resultArr.length="+resultArr.length);
//遍历数组，仅得到'o'
for(var i = 0; i < resultArr.length; i++){console.log("resultArr["+i+"]="+resultArr[i]);
}

    对比

    //目标字符串
var targetStr = 'Hello WORLD!';
//使用了忽略大小写的正则表达式
var reg = /o/gi;
//获取全部匹配
var resultArr = targetStr.match(reg);
//数组长度为2
console.log("resultArr.length="+resultArr.length);
//遍历数组，得到'o'和'O'
for(var i = 0; i < resultArr.length; i++){console.log("resultArr["+i+"]="+resultArr[i]);
}

    元字符使用

    var str01 = 'I love Java';
var str02 = 'Java love me';
// 匹配以Java开头
var reg = /^Java/g;
console.log('reg.test(str01)='+reg.test(str01)); // false
console.log("<br />");
console.log('reg.test(str02)='+reg.test(str02)); // truevar str01 = 'I love Java';
var str02 = 'Java love me';
// 匹配以Java结尾
var reg = /Java$/g;
console.log('reg.test(str01)='+reg.test(str01)); // true
console.log("<br />");
console.log('reg.test(str02)='+reg.test(str02)); // false

    字符集合的使用

    //n位数字的正则
var targetStr="123456789";
var reg=/^[0-9]{0,}$/;
//或者 ： var reg=/^\d*$/;
var b = reg.test(targetStr);//true//数字+字母+下划线，6-16位
var targetStr="HelloWorld";
var reg=/^[a-z0-9A-Z_]{6,16}$/;
var b = reg.test(targetStr);//true

    常用正则表达式

    需求正则表达式
    用户名/^[a-zA-Z ][a-zA-Z-0-9]{5,9}$/
    密码/^[a-zA-Z0-9 _-@#& *]{6,12}$/
    前后空格/^\s+|\s+$/g
    电子邮箱/^[a-zA-Z0-9 _.-]+@([a-zA-Z0-9-]+[.]{1})+[a-zA-Z]+$/

    6. XML

    6.1 常见配置文件类型

    1. properties文件,例如druid连接池就是使用properties文件作为配置文件

    2. XML文件,例如Tomcat就是使用XML文件作为配置文件

    3. YAML文件,例如SpringBoot就是使用YAML作为配置文件

    4. json文件,通常用来做文件传输，也可以用来做前端或者移动端的配置文件

    6.1.1 properties配置文件

    atguigu.jdbc.url=jdbc:mysql://localhost:3306/atguigu
atguigu.jdbc.driver=com.mysql.cj.jdbc.Driver
atguigu.jdbc.username=root
atguigu.jdbc.password=root

    • 由键值对组成

    • 键和值之间的符号是等号

    • 每一行都必须顶格写，前面不能有空格之类的其他符号

    6.1.2 xml配置文件

    <?xml version="1.0" encoding="UTF-8"?>
<!--
1. 根标签只能有一个
2. 第一行不变，而且必须放在第一行
3. xml是有约束的，限定xml内部能编写的内容dtd     简单 上手快约束没有schema细致schema      复杂 上手慢约束要比dtd约束细致
-->
<jdbc><dev><username>root</username><password>root</password><!--<driver>标签：XML中的自定义标签，通常用于声明数据库驱动的全限定类名--><!--com.mysql.cj：MySQL Connector/J的基包名（cj表示Connector/J）--><!--jdbc：JDBC相关代码的子包--><!--Driver：核心驱动类，实现java.sql.Driver接口--><driver>com.mysql.cj.jdbc.Driver</driver><url>jdbc:mysql://localhost:3306/atguigu</url></dev><test><username>zhangsan</username><password>123456</password><driver>com.mysql.cj.jdbc.Driver</driver><url>jdbc:mysql://localhost:3306/atguigu</url></test><formal><username>lisi</username><password>654321</password><driver>com.mysql.cj.jdbc.Driver</driver><url>jdbc:mysql://localhost:3306/atguigu</url></formal>
</jdbc>
    xml配置文件解析(了解)
    public class TestDom4j {@Testpublic void testRead() throws Exception {// 读取jdbc.xml配置文件，获得document对象SAXReader saxReader = new SAXReader();// 通过类加载器获得指向字节码根路径下的指定文件的输入流InputStream resourceAsStream = TestDom4j.class.getClassLoader().getResourceAsStream("jdbc.xml");// 通过输入流获得配置文件，解析成一个dom对象Document document = saxReader.read(resourceAsStream);// 从document对象上获取配置文件中的信息Element rootElement = document.getRootElement();// 根标签的名字System.out.println(rootElement.getName());// 获取元素下的子元素List<Element> elements = rootElement.elements();for (Element element : elements) {System.out.println("\t" + element.getName());// 从元素上获取属性Attribute idAttribute = element.attribute("id");System.out.println("\t\t" + idAttribute.getName() + ":" + idAttribute.getValue());// 继续读取子元素List<Element> eles = element.elements();for(Element element2 : eles) {System.out.println("\t\t\t" + element2.getName() + ":" + element2.getText());}}}
}

    http://www.dtcms.com/a/340900.html

    相关文章：

  • C/C++嵌入式笔试核心考点精解
  • AI 与 OCR 识别：深度融合的智能信息提取技术
  • Elasticsearch 写入全链路：从单机到集群
  • 实验8.20
  • nvidia最新论文：小型语言模型是代理人工智能的未来
  • iOS App 上架实战 从内测到应用商店发布的全周期流程解析
  • Linux 文件系统权限管理（补充）
  • 管理项目服务器连接数据库
  • Linux 文本处理三剑客：awk、grep、sed 完全指南
  • 中小型企业是否需要使用高防服务器
  • Linux-文本搜索工具grep
  • C++进阶-----C++11
  • Hangfire定时部署（.NET 8 + SQL Server）
  • Android 资源替换：静态替换 vs 动态替换
  • PHP特有的安全漏洞及渗透测试利用方法（通俗易懂）
  • 项目1总结其一
  • 49 C++ STL模板库18-类模板-pair
  • ROS 2系统Callback Group概念笔记
  • 突发！DeepSeek刚刚开源V3.1-Base
  • UTF-8 编解码可视化分析
  • 【Day 30】Linux-SQL语句
  • C/C++ 与嵌入式岗位常见笔试题详解
  • MYSQL为什么会发生死锁,怎么解决
  • 第三阶段数据-3：数据库脚本生成，备份与还原，分离与附加
  • configtx通道配置文件
  • RHCA08内存管理
  • 对称加密算法
  • 数据库DML语言（增、删、改）
  • 闪电赋能全链路：领码SPARK一体化创新平台
  • 基于HTTP3的WebTransport实践