前言

HTML断点调试是一种网页开发技巧，允许开发者在浏览器中暂停代码执行，以便逐行检查和分析HTML文档结构和元素属性。通过在浏览器的开发者工具中设置断点，开发者可以追踪页面渲染过程，识别并修复布局、样式或DOM（文档对象模型）操作方面的问题，从而提升网页的质量与性能。这种方法直观且高效，是前端开发和故障排查的必备技能。

话题引入，replace方法初步认识

ini 复制代码

function createPhoneNumber(nums) {
    let format = '(xxx) xxx-xxxx'
    for (let i = 0; i < nums.length; i++) {
        format = format.replace('x', nums[i])
    }
    return format
}

console.log(createPhoneNumber([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]));
//(123) 456-7890

这个代码的功能是将我们传入的数组里的数字变成打印格式的字符串。我们这里采用字符串replace的方法。最后就可以达到我们想要的结果。那么我们再次给出一题。

正则表达式替换

题意

\[\] "no one like this"
$"Peter"$ "Peter like this"
$"Peter", "Alex"$ "Peter and Alex like this"
$"Peter", "Alex"，"John"$ "Peter , Alex and John like this"
$"Peter", "Alex"，\cdot\cdot\cdot\cdot\cdot\cdot$ "Peter , Alex and n like this"

我们传入数组，当我们输入不同数量的人名时，会打印不同的结果。

方法一

arduino 复制代码

const likes = names => {
    switch (names.length) {
        case 0: return 'no one like this'
        case 1: return names[0] + "like this"
        case 2: return names[0] + " add " + names[1] + " like this"
        case 3: return names[0] + ", " + names[1] + " add " + names[1] + " like this"
        default:
            return names[0] + "," + names[1] + ' and ' + (names.length - 2)
                + ' like this'
    }
}
console.log(likes(['龙哥', '发哥', '艾总', '小爱', '遇到']));
//龙哥,发哥 and 3 like this

我们这里采用switch分支语句来达到效果，但是仍然感觉不够优雅。

方法二

javascript 复制代码

function like(names) {
    var templates = [
        'no one like this',
        '{name} like this',
        '{name} and {name} like this',
        '{name} , {name} and {name} like this',
        '{name}, {name} and {n} like this'
    ]

    var idx = Math.min(names.length, 4);
    return templates[idx].replace(/{name}|{n}/g, function (val) {
        console.log(val, '-------------')
        return val === '{name}' ? names.shift() : names.length
    })
}
//{name} -------------
//{name} -------------
//{n} -------------
//龙哥, 发哥 and 3 like this

我们这里采用正则表达式的方法，非常优雅，其中就要用到我们的断点调试。首先用到了我们的数组。我们数组里储存我们对应不同结果的字符串。其中我们的人名用{name}来替代，当传入人数超过四个人时，我们只取四个人，即对应数组最后一位。接下来到了我们的核心，当我们把这段字符串进行替换时，我们的第一个参数接上正则表达式，这里的正则表达式意思是，碰见所有的'{name}'或者'{n}'字符串我们将要进行替换，第二个参数我们接了一个回调函数（一般是接替换之后的值），我们之所以要用回调函数是因为我们要根据正则表达式的结果来判断我们的替换结果。

我们接下来进行断点调试。

我们将一开始的js文件引入html之中。然后打开控制台。

我们将要调试的代码块打上标记。

先点击一次调试按钮。

这个时候将我们的鼠标悬停于我们传入的数组之中可以发现数组的长度是原长度。

我们点击两次调试按钮，将回调函数运行一遍，这个时候可以发现数组的长度已经减少为4，通过shift方法出去了第一位作为我们替换之后的值。我们也对replace的第二个参数有了更为深刻的了解，如果是正常值，就是替换之后的值，如果是回调函数，则回调函数传入的参数是被本轮被替换的的值，返回结果为替换之后的值。

我们点击运行再一次调试之后可以发现长度已经变为了3.

我们再次点击调试会发现已经结束啦。

我们再次对replace和正则表达式还有我们的断点调试一起做一个总结。

首先根据我们的传入数组长度来拿到我们答案数组里的答案。
接着用replace对这个答案字符串进行替换。
第一个参数/{name}|{n}/g表示要被替换的值，是一个正则表达式，代表依次匹配所有的'{name}'或'{n}'.
第二个参数是一个回调函数，根据匹配到的值去返回替换之后的值。这里当我们发现匹配{n}后直接返回数量，至此匹配结束。

网页开发者秘籍：掌握HTML断点调试，解锁高效排错新境界

前言

话题引入，replace方法初步认识

正则表达式替换

方法一

方法二