js converts numbers to decimal + hexadecimal (linkage el-ui drop-down selection box)

1. Convert decimal to hexadecimal

Regular expression:

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

Analysis: [0-9]represents single digits, ([1-9][0-9]{0,})represents tens and above

---

Two, hexadecimal to decimal

Regular expression:

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

Analysis: The hexadecimal number can be identified by 0x or 0X (writable or not), [0-9a-fA-F]+which is the character allowed to be included in the hexadecimal number writing method. +The number means that the hexadecimal number has at least 1 character.
If you need to limit the bit Number, such as up to 4 digits, can be written like this:/^((0[xX])?[0-9a-fA-F]{1,4})$/

---

3. Linkage demo

Requirements:
1. The user enters a decimal or hexadecimal integer
2. During the input process, the user can choose to enter the decimal system.
For example:
the user enters 0xAF0 as hexadecimal, and the user is automatically prompted for the entered item (0xAF0) and Assisted Conversion Items (2800) and vice versa

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>

At first, I only thought of starting with 0x to judge hexadecimal. In fact, integers can also be regarded as hexadecimal numbers, so that it is impossible to judge which base the user enters: for example, 20 is regarded as hexadecimal, decimal Converted to 32.
The user wants to input the hexadecimal number 20, according to the judgment conditions in querySearch, but converts 20 as decimal, and the resulting combination is: (20, 32).
If according to the user's idea, the hexadecimal number 20 ----- corresponds to -----> the decimal number 14, the resulting combination is: (20 and 14) There is no good way to

deal with the above ambiguity, my project There is no requirement for the decimal and hexadecimal options to come first or later, as long as there is another alternative. So:
if the user wants to input hexadecimal 20, choose the original number 20, and the other option 32 as the result of converting 20 into decimal

Of course, it would be better if the designer had a more comprehensive constraint design

Attachment: online tool for base conversion