1. uniapp開發 移動端使用replace注意事項
??uniapp replaceAll方式在手機失效是因為安卓環境下不支持replaceAll方法。
在uniapp開發中,如果在安卓環境下使用replaceAll方法,可能會導致頁面無法渲染,并且控制臺不會反饋錯誤信息。為了解決這個問題,可以將replaceAll方法換成replace方法。
1.1. 場景描述
??在用uni-app開發H5項目時出現了這樣的一個問題:
由于業務需要,需要在有渲染后端返回的富文本內容時對內容做一個處理,將域名 dcs-new.cmbchina.cn 替換為 dcs-uat.cmbchina.com:8080,一開始用的是replaceAll的方法,具體寫法如下:
//vue文件
this.article = this.article.replaceAll(sysVars.oldPageUrl, sysVars.newPageUrl);//public文件夾下的static文件夾下的js文件夾下的config.js文件window.sysVars = {//舊地址oldPageUrl: 'dcs-new.cmbchina.cn',//新地址newPageUrl: 'dcs-uat.cmbchina.com:8080'
}
1.2. 問題
??replaceAll方法并不兼容所有的手機,比如小米手機就會因為使用該方法導致內容無法顯示。
1.3. 解決方案
??使用正則表達式進行全局替換
在uni-app中,你可以使用正則表達式的全局匹配標志g來替換所有匹配的模式。以下??是一個示例代碼
<template><view>{{ text.replace(/\n/g, '<br>') }}</view>
</template><script>
export default {data() {return {text: '這是一段需要換行的文本\n這是換行后的文本'};}
};
</script>
??在這個示例中,我們使用了正則表達式/\n/g來匹配文本中的換行符,并將其替換為
標簽。