js 校验用户输入路径是否是磁盘路径及根据后端格式转义路径

前言

获取后端数据的时候,需要用户输入框输入文件的路径信息,且文件路径输入的格式是一些磁盘路径,比如:D:\WorkPace\demo.text 这种路径,输入完后传给后端。
传的过程中如要做如下校验:

  1. 校验路径是否是磁盘路径,http这种不行
  2. 提交后端时,转义路径,如:
D:\WorkPace\demo.text 
转为 
D:\\WorkPace\\demo.text

PS:以上的验证都是请教群里问各位大佬的。同时从中也学到很多东西,就比如第二点的转义,真的是测试了半天还是实现不了,最后大佬解释一番后,真的是一语惊醒梦中人。

校验磁盘路径

  • 判断Windows路径
/^[a-zA-Z]:/.test(path)
  • 判断 Windows 和 linus
/^([a-zA-Z]:|\/)/.test(path)

路径转义

首先说下,这个功能是用户在输入框输入路径,然后提交的时候做一些校验和转义的,所以为了方便我在一个测试页面使用字面量来做测试校验、转义成功后把代码粘贴过去就行了,之前的一些表单验证或者其他校验也是这样子写,对本人来说方便快捷一点。校验磁盘路径的可以实现了,但是在做转义的时候发现了意想不到的问题。

// var str = 'D:\workpace\trunk.text' // 在 VSCode 里一旦保存后,D: 后面的 \ 会不见,然后我加多一个 / 转义
var str = 'D:\/workpace\trunk.text'
conosole.log(str.replaceAll("\\", "\\\\"))

打印后发现显示的数据很不一样,如下:
image
测试了很多次也百度了很久但是发现没有找到解决方法,我就去群里问大佬,得到这样子的解释:

直接用字符串字面量赋值,写的是 'D:\workpace\trunk.text' 这字符串里面就有两个转义(当使用 VSCode 的时候会看到颜色都会不一样)
如果用input框去收集用户输入,使用 replaceAll("\\", "\\\\") 转义路径,是不会收集到这个量的。
最终结果获取到的就是:'D:\\workpace\\trunk.text'

根据这个,我直接使用输入框输入路径,然后使用 replaceAll("\", "\\") 转义路径

<template>
  <div class="routerTest">
    <div>需求:输入框输入磁盘路劲地址</div>
    <div>验证:1. 地址是否是磁盘路劲</div>
    <div>
      验证:2. 把地址转换为如:D:\Adobe\Adobe Photoshop CC 2018 转换为
      D:\\Adobe\\Adobe Photoshop CC 2018
    </div>
    <div class="opt">
      <el-input style="width: 700px" clearable v-model="myStr"></el-input>
      <el-button @click="testPath">验证</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      myStr: ""
    };
  },
  methods: {
    testPath() {
      // 判断路径是否是磁盘路径
      let flag = /^([a-zA-Z]:|\/)/.test(this.myStr);
      // 转义路径
      let result = this.myStr.replaceAll("\\", "\\\\");
    },
  },
};
</script>

<style scoped>
.routerTest {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 100px;
}

.opt {
  display: flex;
  align-items: center;
}
</style>

然后看打印,真的是这样子,实现了想要的效果且没有出现上面打印的那样子漏掉数据
image

题外话:在文件夹里路径为这样子的,直接粘贴路径打开的正是文件所在地址,无须转义

D:/workpace/trunk.text

注:转义根据实际需求而定,本人只是记录出现过的问题,方便日后查看

posted @ 2022-10-08 15:14  三勺  阅读(547)  评论(0编辑  收藏  举报