微信小程序中转义字符的处理方法

2024-10-03 07:57:54

在微信小程序开发过程中，有时候会用到常用的一些特殊字符如：‘<'、‘>'、‘&'、‘空格'等，微信小程序同样支持对转义字符的处理，下面提供两种方法用来处理微信小程序中转义字符的处理。

1.官方API调用

这种方式，我们直接在wxml布局文件中，直接调用相关特殊符号的转义字符会无效，原因是小程序的text文本控件的decode属性没有打开导致的，看下文档说明：

从文档中，我们可以发现，decode属性默认为false，不会解析我们的特殊字符，我们通过设置decode属性为true，并且调用其转义字符即可实现该特殊字符的显示。

<text class='dialog-close' decode='true'>< 返回</text>

通过上述代码即可实现 < 返回的效果。

其中：

2.通过JS文件来实现

除了上面的实现方法，针对一些特殊字符我们还可以通过wxml与JS文件相结合的方式来实现。

首先，在wxml文件中对text文本控件做如下设置：

<text class='dialog-close'>{{dialogback}}</text>

然后，我们在JS文件的data中设置其文本内容：

data: {
 dialogback:"< 返回",
 //... 其他配置
 }

通过这种方式也可以实现 < 返回 的效果。

示例

因为我是在<image>标签中访问，所以小程序中没有便捷方法可以转义，写了一个死方法——replace.js，如下：

//替换URL中特殊字符
function replaceSpecialChar(url) {
 url = url.replace(/"/g, '"');
 url = url.replace(/&/g, '&');
 url = url.replace(/</g, '<');
 url = url.replace(/>/g, '>');
 url = url.replace(/ /g, ' ');
 console.log("转义字符", url);
 return url;
}
module.exports = {
 replaceSpecialChar: replaceSpecialChar
}

需要用到的时候，在页面对应的js里面调用该方法：

var replace = require("../../utils/replace.js");
Page({
 ..............
 url = replace.replaceSpecialChar(res.data.url)
}）

至此，微信小程序中关于转义字符的处理就基本实现了，如有问题，欢迎留言。也希望大家多多支持我们。

js 转义字符及URI编码详解

URL中的转义字符当URL的参数中出现诸如+,空格,/,?,%,#,&,=等特殊字符串符号时,因为上述字符有特殊含义,导致服务器端无法正确解析参数,如何处理?解决办法:将这些字符转化成服务器可以识别的字符. 如果要在URL中传递特殊符号的原本意义,要对他们进行编码.编码的格式为:%加字符的ASCII码(16进制),例如空格的编码值是"%20". URL中特殊符号的用途及普通意义的编码 + URL 中+号表示空格 %2B 空格 URL中的空格可以用+号或者编码 %20 / 分隔
正则中需要转义的特殊字符小结

如果要查找文件名中有*的文件,则需要对*进行转义,即在其前加一个\.ls \*.txt.正则表达式有以下特殊字符.需要转义特别字符说明 $ 匹配输入字符串的结尾位置.如果设置了 RegExp 对象的 Multiline 属性,则 $ 也匹配 '\n' 或 '\r'.要匹配 $ 字符本身,请使用 \$. ( ) 标记一个子表达式的开始和结束位置.子表达式可以获取供以后使用.要匹配这些字符,请使用 $ 和 $. * 匹配前面的子表达式零次或多次.要匹配 * 字符,请使用 \*. + 匹配前面
js特殊字符转义介绍

点的转义:. ==> \\u002E 美元符号的转义:$ ==> \\u0024 乘方符号的转义:^ ==> \\u005E 左大括号的转义:{ ==> \\u007B 左方括号的转义:[ ==> \\u005B 左圆括号的转义:( ==> \\u0028 竖线的转义:| ==> \\u007C 右方括号转义:] ==> \\u005D 右圆括号的转义:) ==> \\u0029 星号的转义:* ==> \\u002A 加号的转义:+ ==>
java清除html转义字符

复制代码代码如下: import java.util.HashMap;import java.util.Map; import org.apache.commons.lang3.StringUtils;import org.apache.commons.logging.Log;import org.apache.commons.logging.LogFactory;/** * 静态文件处理的一些便捷服务 * @author Kettas * 4:27:25 PM */public class
PHP字符转义相关函数小结(php下的转义字符串)

文章中有不正确的或者说辞不清的地方,麻烦大家指出了--- 与PHP字符串转义相关的配置和函数如下: 1.magic_quotes_runtime 2.magic_quotes_gpc 3.addslashes()和stripslashes() 4.mysql_escape_string() 5.addcslashes()和stripcslashes() 6.htmlentities() 和html_entity_decode() 7.htmlspecialchars()和htmlspecialc
PHP正则表达式基本函数修饰符元字符和需转义字符说明

我在写小偷中用了大量的正则,所以在接下来的版本中要逐步减少正则的应用在PHP正则表达式中需要转义的字符如下: $^*()+={}[]|/:<>.?'" 注意:perl风格中表达式要求以/开始和结尾,如:/food/ 表匹配字符 food perl修饰符如下: i 完成不区分大小写的搜索 g 查找所有出现(all occurrences,完成全局搜索) m 将一个字符串视为多行(m就表示多(multiple)).默认情况下,^和$字符匹配字符串中的最开始和最末尾.使用m修饰符将使^和
使用Js让Html中特殊字符不被转义

例如:<textarea></textarea>之间包含有类似的这种转义字符的时候总会被解析,倒是可以把所有的"&"通过程序替换成"&",但是有些本来就是"&"的也会被转换,这就错了.怎么让<textarea></textarea>之间包含的文本原封不动的显示出来呢? 复制代码代码如下: <textarea id="t" rows="20
微信小程序中转义字符的处理方法

在微信小程序开发过程中,有时候会用到常用的一些特殊字符如:'<'.'>'.'&'.'空格'等,微信小程序同样支持对转义字符的处理,下面提供两种方法用来处理微信小程序中转义字符的处理. 1.官方API调用这种方式,我们直接在wxml布局文件中,直接调用相关特殊符号的转义字符会无效,原因是小程序的text文本控件的decode属性没有打开导致的,看下文档说明: 从文档中,我们可以发现,decode属性默认为false,不会解析我们的特殊字符,我们通过设置decode属性为true,并且调
微信小程序中setInterval的使用方法

微信小程序中setInterval的使用方法看了下小程序的画布功能,简单的使用了一下,用蹩脚的逻辑做了个 "弹啊弹,弹走鱼尾纹的小球",一起来看下吧.过程不重要主要是画布的使用哦.(本来想传gif的来着,后来发现不会传,就传个图片吧,想看的自己下载下来玩呦) 先上图,后上代码了: js: var winWidth = 0 var winHeight = 0 var diameter = 10 var time = 0 Page({ data:{ numX:1, numY:1 }, x
uniapp在微信小程序中使用ECharts的方法

今天使用uniapp集成Echarts,实现地图图表的展示可以参照mpvue-echarts 参照:https://github.com/F-loat/mpvue-echarts https://ask.dcloud.net.cn/article/36288 进行改进网上有很多教程,但都说的不是很明白,下面直接上步骤 1.npm install echarts mpvue-echarts 执行该命令后,会在node_modules下生成mpvue-echarts.echarts,然后把mpv
在微信小程序中使用vant的方法

在微信小程序中如何使用vant UI ,最近在开发小程序项目的时候遇到了这个问题, 去网上百度发现大家给的步骤普遍都是直接npm i vant-weapp -S --production,接着构建npm, 然而,我在尝试的时候发现,构建npm的时候一直失败,告诉我找不到node_moudules ???? 你们是不是也遇到了这种问题呢? 好的,接下来就让我来告诉大家真正的解决方案吧! 首先, 你需要在小程序根目录下打开命令窗口,依次输入以下命令 npm init 初始化 npm install
在微信小程序中使用图表的方法示例

前言:网上有许多的图表库,如:Echarts.Tau Charts.ChartJS等等,具体自行百度. 这次我们使用的是:Echarts 官方教程:点击查看 Echarts下载地址:飞机直达 1.下载好之后,把里面的ec-canvas文件夹复制到项目中,如:在项目中建立一个文件夹component ,然后把ec-canvas放到component文件夹里面. 2.在pages中新建一个页面,我这边建立了一个echarsDemo页面,然后在echarsDemo目录中的index.json文件中引入
微信小程序中显示html格式内容的方法

前言最近项目上遇到在微信小程序里需要显示新闻内容,新闻内容是通过接口读取的服务器中的富文本内容,是html格式的,小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过wxParse来实现. 准备工作: 首先我们下载wxParse github地址:https://github.com/icindy/wxParse 本地下载:http://xiazai.jb51.net/201704/yuanma/wxParse-master(jb51.net).rar wx
微信小程序中使元素占满整个屏幕高度实现方法

微信小程序中使元素占满整个屏幕高度实现方法在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情况下才可以. 以前我的做法是用js获取屏幕的高度,然后将其赋值给height, 屏幕高度在网页中为:window.innerHeight; 在微信小程序中则需要调用wx.getSystemInfo接口,然后通过setData赋值但是显然通过js来进行的,
微信小程序中使用Async-await方法异步请求变为同步请求方法

微信小程序中有些 Api 是异步的,无法直接进行同步处理.例如:wx.request.wx.showToast.wx.showLoading等.如果需要同步处理,可以使用如下方法: 注意: Async-await方法属于ES7语法,在小程序开发工具中如果勾选es6转es5, 会报错: ReferenceError: regeneratorRuntime is not defined 避免报错,可以引入 regenerator 在根目录下创建 lib 文件夹,并将 https://github.c
微信小程序中使用ECharts 异步加载数据的方法

官网例子都是同步的,怎么引入及同步demo请移步官网 <view class="container"> <ec-canvas id="mychart-dom-multi-bar" canvas-id="mychart-multi-bar" ec="{{ ecBar }}"></ec-canvas> <ec-canvas id="mychart-dom-multi-scatte
微信小程序中使用自定义图标（阿里icon）的方法

weui提供的图标比较少,有时我们需要更多的图标,可以使用以下方法自定义图标库: 1,到阿里巴巴矢量图标库(http://iconfont.cn/)生成自己的字体图标,下载代码,解压,打开iconfont.css 2,在wxss文件中引用字体 <style type="less"> @font-face { font-family: 'iconfont'; src: url(data:font/truetype;charset=utf-8;base64,AAEAAAANAI

微信小程序中转义字符的处理方法

相关推荐

随机推荐