uni-app js正则replace问题

mec1mxoz  于 2021-11-27  发布在  Java
关注(0)|答案(15)|浏览(2190)

问题描述

在uni-app微信小程序中使用replace替换字符串为空无效,必须改成replace(/正则/, ' ')才可以,但是页面却把空格显示出来了

复现步骤

[复现问题的步骤]
let value = e.detail.replace(/[^\d.]/g, ''); // 替换飞数字和小数点无效
this.$nextTick(()=>{
this.$set(this.sku[e.target.dataset.index], 'retail_price', value);
this.$forceUpdate();
})

预期结果

let value = e.detail.replace(/[^\d.]/g, '');
使用这个应该可以把非数字和小数点替换成空,界面不显示空格

实际结果

let value = e.detail.replace(/[^\d.]/g, '');
使用这个正则没有把非数字和小数点替换成空,界面显示完全无效

系统信息:

  • 发行平台: 微信小程序
  • 操作系统: iOS 14
  • HBuilderX版本: 2.8.13.20200927
  • 设备信息: iPhone11 iPhonexr

补充信息

[可选]
[根据你的分析,出现这个问题的原因可能在哪里?]

vsdwdz23

vsdwdz231#

应该和uni-app无关,你再仔细验证一下

fsi0uk1n

fsi0uk1n2#

我验证一天了,这个正则放到其他不是uni-app的项目里就很正常,在uni-app怎么都不管用

efzxgjgh

efzxgjgh3#

打印以下内容:

  • 替换前的字符串
  • 替换使用到的正则
  • 替换后的字符串
hfwmuf9z

hfwmuf9z4#

控制台打印的是值是对的,不带空格纯数字小数点,但是页面显示是包含空格的

yrwegjxp

yrwegjxp5#

那应该和正则没有关系,替换成其他的固定值测试是否有效

np8igboo

np8igboo6#

写死一个字符串执行这个正则打印出来的值也是只保留数字和小数点,但是页面显示也是带空格

m3eecexj

m3eecexj7#

不执行这个正则,先不管正则,测试直接替换input的值为固定值

zvms9eto

zvms9eto8#

我怀疑是不是不能双向绑定导致的,输入框怎么变,下面都不变

swvgeqrz

swvgeqrz9#

当前 input 使用了 v-model 吗?

hwazgwia

hwazgwia10#

uni-app用不了v-model,直接报错,只能用v-bind

yhuiod9q

yhuiod9q11#

哦,我一直以为你用的input,原来不是input,input可以使用v-model

你试试延迟(更久)赋值,甚至用一个按钮点击后重新赋值是否生效

7dl7o3gd

7dl7o3gd12#

this.$nextTick(()=>{
this.$set(this.sku[e.target.dataset.index], 'retail_price', value);
this.$forceUpdate();
})
我这个就是啊

jgovgodb

jgovgodb13#

增加更多更久更大的延迟试试

vs91vp4v

vs91vp4v14#

setTimeout 2秒都不行

mitkmikd

mitkmikd15#

这个不是正则的问题吧
看你图片上用的似乎是Vant 这个UI库 看源码里面 van-field 渲染使用的是 data 里面的 innerValue 这个属性 而非 props 里面的 value

created: function () {
        this.value = this.data.value;
        this.setData({ innerValue: this.value });
    },
<input value="{{ innerValue }}" .... />

input type="number" 这个属性在微信小程序中真机调试的情况下 是不会出现空格和英文字符包括小数点

不使用数字键盘 实现方式参考如下:

<template>
	<view class="container">
		<view class="test" v-for="(item, index) in sku" :key="index">
			<van-field
			type="number" 
			ref="input" 
			:value="item.retail_price" 
			:data-index="index" 
			@input="changeSkuIput" />
			<view>
				{{item.retail_price}}
			</view>
		</view>
	</view>
</template>
<script>

export default {
data() {
return {
sku: [{ retail_price: 0}]
}
},
methods: {
changeSkuIput(e) {
const value = e.detail.replace(/[^\d.]/g, ''); // 替换飞数字和小数点无效
this.$set(this.sku[e.target.dataset.index], 'retail_price', value);
const ref = this.$refs.input
ref[e.target.dataset.index].setData &&
ref[e.target.dataset.index].setData({
innerValue: value
})

}
}
}
</script>

相关问题