replace方法

王小婷

发布于 2023-08-13 10:00:45

2710

发布于 2023-08-13 10:00:45

文章被收录于专栏：编程微刊

replace方法的定义

replace方法是JavaScript字符串对象的方法之一，用于在字符串中执行模式匹配并进行替换。它接受两个参数：要查找的模式（可以是正则表达式或字符串）和要替换的内容。

语法：

str.replace(searchValue, replaceValue)

其中：

searchValue：要查找的模式，可以是一个正则表达式或字符串。 replaceValue：要替换的内容，可以是一个字符串或一个回调函数。使用字符串作为模式：

let str = "Hello, World!";
let newStr = str.replace("World", "Universe");
console.log(newStr); // 输出 "Hello, Universe!"

使用正则表达式作为模式：

let str = "Hello, World!";
let newStr = str.replace(/woRld/i, "Universe");
console.log(newStr); // 输出 "Hello, Universe!"

在上述示例中，我们使用replace方法将字符串中的模式（字符串或正则表达式）进行替换。第一个参数指定要查找的内容，第二个参数指定要进行替换的内容。

如果第一个参数是一个字符串，replace方法只会替换第一个匹配项。如果希望替换所有匹配项，可以使用正则表达式，并使用全局标志（例如 /pattern/g）。

此外，replace方法还支持使用回调函数作为第二个参数，以动态生成替换内容。回调函数接受匹配项作为参数，并返回相应的替换内容。

replace方法的使用

1：将../../static/img/pot/12.png变成./static/img/pot/12.png

let path = "../../static/img/pot/12.png";
path = path.replace(/^(\.\.\/)+/, "./");
console.log(path); // 输出 "./static/img/pot/12.png"

在这段代码中，我们使用了replace方法和正则表达式来替换路径中的内容。正则表达式/^(../)+/匹配以"../"开头的部分。

^：表示匹配输入的开始位置。 (../)+：表示匹配连续出现的"../"。通过将匹配到的"../"替换为"./"，我们将路径中的上级目录标识转换为当前目录标识。

最后，console.log输出了替换后的路径，即"./static/img/pot/12.png"。

:2：将./static/img/pot/12.png变成../../static/img/pot/12.png

要将路径"./static/img/pot/12.png"转换为"../../static/img/pot/12.png"，你可以使用字符串的replace方法来进行替换操作。下面是一个示例代码：

let path = "./static/img/pot/12.png";
path = path.replace("./", "../../");
console.log(path); // 输出 "../../static/img/pot/12.png"

在这段代码中，我们使用了replace方法来替换路径中的"./"为"../../"。这样就实现了将当前目录标识转换为上级目录标识的操作。

注意，这里使用了path.replace("./", "../../")而不是path.replace("./", "../../../")，因为只需要将路径中的当前目录标识替换为上级目录标识，而不是完全替换所有的当前目录标识。

最后，console.log输出了替换后的路径，即"../../static/img/pot/12.png"。

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <script>
            // let path = "./static/img/pot/12.png";
            // path = path.replace("./", "../../");
            // console.log(path); // 输出 "../../static/img/pot/12.png"


            // let path = "./static/img/pot/12.png";
            // path = path.replace(/^\.\//, '../../');
            // console.log(path); // 输出 "../../static/img/pot/12.png"


            // let path = "../../static/img/pot/12.png";
            // path = path.replace("../", "./");
            // console.log(path); // 输出 "./../static/img/pot/12.png"

            let path = "../../static/img/pot/12.png";
            path = path.replace(/^(\.\.\/)+/, "./");
            console.log(path); // 输出 "./static/img/pot/12.png"
        </script>
    </body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-08-12，如有侵权请联系 cloudcommunity@tencent.com 删除

正则表达式