fetch读取文件内容并查找文件内容后替换为对应的字符串

最新推荐文章于 2023-12-19 14:51:39 发布

yiyi@yiyi

最新推荐文章于 2023-12-19 14:51:39 发布

阅读量224

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2301_78814180/article/details/134686139

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
       
        const fileUrl = '文件地址';
        const searchStr = 'v';
        let modifiedStr = ''; // 用于存储已修改的字符串

        fetch(fileUrl)
            .then(response => {
                // response.body 是响应对象的主体部分，也就是要读取的内容。然后，我们使用 getReader() 方法从响应主体中获取一个阅读器对象，该对象具有读取数据的方法。
                const reader = response.body.getReader();
                //这部分代码创建了一个可读流（ReadableStream），并定义了该可读流的 start() 方法。
                return new ReadableStream({
                    start(controller) {
                        function processResult(result) {
                            //检查当前结果是否已经读取完毕（result.done）。如果是，我们使用 controller.close() 关闭控制器
                            if (result.done) {
                                controller.close();
                                console.log("文件读取完成");
                                console.log('修改后的内容:', modifiedStr);
                                return;
                            }
                            // 使用 TextDecoder().decode(result.value) 将二进制数据解码为字符串，并保存在 str 变量中。
                            const str = new TextDecoder().decode(result.value);

                            if (str.includes(searchStr)) {
                                const modifiedChunk = str.replace(new RegExp(`(^${searchStr})`, 'gm'), `$1哈哈`); // 给匹配字符串添加 "哈哈"
                                modifiedStr += modifiedChunk; // 将修改后的字符串拼接到最终的字符串中
                                console.log("文件中存在以 'v' 开头的字符串，添加了 '哈哈'");
                            } else {
                                modifiedStr += str; // 将原始字符串拼接到最终的字符串中
                            }

                            return reader.read().then(processResult);
                        }
                        //reader.read().then(processResult) 递归地读取下一个结果，继续执行 processResult(result) 函数，直到所有结果都被处理完毕。
                        return reader.read().then(processResult);
                    }
                });
            })
            .catch(error => {
                console.error('文件读取错误:', error);
            });
    </script>
</body>

</html>