js将数字转十进制+十六进制（联动el-ui下拉选择框）

一、十进制转十六进制

正则表达式：

/^([0-9]||([1-9][0-9]{0,}))$/

解析：[0-9]代表个位数，([1-9][0-9]{0,})代表十位及以上

---

二、十六进制转十进制

正则表达式：

/^((0[xX])?[0-9a-fA-F]+)$/

解析：十六进制数可用0x或0X标识（可写可不写），[0-9a-fA-F]+是十六进制数写法允许包含的字符，+号指这个十六进制数至少有1个字符，
如果你需要限制位数，比如最多4位，可这样写：/^((0[xX])?[0-9a-fA-F]{1,4})$/

---

三、联动demo

要求：
1、用户输入十进制或十六进制整数
2、且用户在输入过程中可供用户选择输入进制
举例：
用户输入0xAF0为十六进制，自动为用户提示已输入项(0xAF0)与辅助转化项(2800)，反之亦然

html:

<template><div><el-form :model="numForm" :rules="numRule"><el-form-item label="值：" prop="num"><!--fetch-suggestions作用：返回输入建议，我这里用的只要聚焦输入框就激活下拉，每输一个字符都会调用该方法--><el-autocomplete v-model="numForm.num" :fetch-suggestions="querySearch" placeholder="dec or hex"></el-autocomplete></el-form-item></el-form></div>
</template>

js:

<script>
export default {data(){const hexOrDec = /^(((0[xX])?[0-9a-fA-F]+)||([0-9]||[1-9][0-9]{0,}))$/;const hexOrDecCheck = (rule,value,callback) => {if((value!==null)&&(!(value).toString())){callback(new Error("必填项不能为空"))}else{hexOrDec.test(value)?callback():callback(new Error("请输入十进制或十六进制数"))}}return {decReg:/^([0-9]||[1-9][0-9]{0,})$/,//十进制整数校验hexReg:/^((0[xX])?[0-9a-fA-F]+)$/,//十六进制整数校验numForm:{num:''},numRule:{num:{validator:hexOrDecCheck},arr:[]}}},methods:{querySearch(str,cb){if(this.decReg.test(str)){//如果是整数，辅助转化十六进制，注意必须是number.toString(16)!!!//例：console.log(32.toString(16)) 输出20，转化正确//    console.log("32".toString(16)) 输出32 转化无效this.arr = [{value:str},{value:parseInt(str).toString(16)}]}else if(this.hexReg.test(str)){//如果是16进制数，直接用parseInt(str,16)转//转完后需toString()，不然组件会报错//el-autocomplete要求绑定数组里元素必须有value属性，且值必须为string类型（官方文档有写），this.arr = [{value:parseInt(str,16).toString()},{value:str}]}else{this.arr = [];}cb(this.arr)}}
}
</script>

一开始只想到以0x开头来判断十六进制，其实整数也可以看成是十六进制的数，这样就无法判断用户输入的哪个进制：比如将20看成十六进制，十进制转化后为32。
用户想输入十六进制数20，按照querySearch内判断条件，却是将20作为十进制转化的，出来组合是：（20，32）。
如果按照用户的想法，十六进制数20-----对应----->十进制数14，出来的组合是：（20与14）

对于以上歧义暂没有好的处理方法，我项目中也没有要求十进制和十六进制选项谁前谁后，只要有另一个备选就行。所以：
如果用户想输十六进制20，就选原数20，另一个备选项32当作将20看成十进制转化的结果

当然，如果设计人员有更全面的约束设计会更好

附：进制转化在线工具