在js开发中，我们可能会遇到这样一个问题

当需要通过js动态插入html标签的时候

特别是当遇到大量的变量拼接、引号层层嵌套的情况，会出现转义字符问题，经常出错

我们来看个例子

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script>

        window.onload = function () {

            var id = '1';

            var code = 'zhangsan';

            var name = '张三';

            document.getElementById('test').innerHTML = '<a href="#" onclick="buttonClick(\"' + id + '\",\"' + code + '\">' + name + '</a>';

        }

        function buttonClick(id, code) {

            alert(id + '-' + code);

        }

    </script>

</head>

<body>

    <div id="test"></div>

</body>

</html>

运行直接报错

接下来把转义字符\"改成\'试下

运行之后，发现仍然无法正常显示

这样的代码不光看起来杂乱无章、难以维护，关键是很容易出错

接下来我们开始封装格式化字符串方法

String.js

(function () {

    /// <summary>

    /// 引号转义符号

    /// </summary>

    String.EscapeChar = '\'';

    /// <summary>

    /// 替换所有字符串

    /// </summary>

    /// <param name="searchValue">检索值</param>

    /// <param name="replaceValue">替换值</param>

    String.prototype.replaceAll = function (searchValue, replaceValue) {

        var regExp = new RegExp(searchValue, "g");

        return this.replace(regExp, replaceValue);

    }

    /// <summary>

    /// 格式化字符串

    /// </summary>

    String.prototype.format = function () {

        var regexp = /\{(\d+)\}/g;

        var args = arguments;

        var result = this.replace(regexp, function (m, i, o, n) {

            return args[i];

        });

        return result.replaceAll('%', String.EscapeChar);

    }

})();

通过占位符传递变量值，用%替代了引号转义符，代码简洁了很多，也非常方便维护，出错的机率也小了很多

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="String.js"></script>

    <script>

        window.onload = function () {

            var id = '1';

            var code = 'zhangsan';

            var name = '张三';

            document.getElementById('test').innerHTML = '<a href="#" onclick="buttonClick(%{0}%,%{1}%)">{2}</a>'.format(id, code, name);

        }

        function buttonClick(id, code) {

            alert(id + '-' + code);

        }

    </script>

</head>

<body>

    <div id="test"></div>

</body>

</html>

看下测试效果

测试结果正确，并且点击事件中也正确接收到了参数值

demo下载

JavaScript 实现格式化字符串函数String.format （解决引号嵌套转义符问题）的更多相关文章

  1. 为什么要用内插字符串代替string.format

    知道为什么要用内插字符串,只有踩过坑的人才能明白,如果你曾今使用string.format超5个以上占位符,那其中的痛苦我想你肯定是能够共鸣的. 一:痛苦经历 先上一段曾今写过的一段代码,大家来体会一 ...

  2. JS字符串格式化函数 string.format

    原生JS写的仿C#的字符串format函数,在此基础上又增加了便于JS使用的字面量对象参数. 参照C#中的规则,调用的时候会检测字符串格式,如果字符串格式不规范,或者传入的参数为null或undefi ...

  3. java字符串格式化性能对比String.format/StringBuilder/+拼接

    String.format由于每次都有生成一个Formatter对象,因此速度会比较慢,在大数据量需要格式化处理的时候,避免使用String.format进行格式化,相反使用StringUtils.l ...

  4. str.format() 格式化字符串函数

    语法 它通过{}和:来代替%. “映射”示例 通过位置 In [1]: '{0},{1}'.format('kzc',18) Out[1]: 'kzc,18' In [2]: '{},{}'.form ...

  5. json格式的字符串使用string.Format()方法报错:输入字符串的格式不正确

    解决:把大括号转义一下就可以了啊,大括号的转义是两个{{  结尾是}}     今天看同事写的代码,发现他在使用string.format拼接类似json格式的数据时,大括号多了一对,感觉不对就查了查 ...

  6. 格式化字符串函数sprintf

    sprintf.snprintf相关函数的主要功能是把格式化的数据写入某个字符串.如最常见的应用是将整数或浮点数转换为字符串. 1.sprintf 将格式化的数据写入字符串,并自动在末尾加上一个空字符 ...

  7. JavaScript 之 截取字符串函数

    一.函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组 例子: str=”jpg|bmp|gif|ico|png”; arr=theString.split(”|”); //a ...

  8. Python格式化字符串(f,F,format,%)

    # 格式化字符串: 在字符串前加上 f 或者 F 使用 {变量名} 的形式来使用变量名的值 year = 2020 event = 'Referendum' value = f'Results of ...

  9. Java 和JavaScript实现C#中的String.format效果

    1.Java实现      /**      * 需要引入com.alibaba.fastjson.1.2.8     * String result2=HuaatUtil.format(templa ...

随机推荐

  1. ios多线程NSThread

    1.简介: 1.1 iOS有三种多线程编程的技术,分别是: 1..NSThread 2.Cocoa NSOperation (iOS多线程编程之NSOperation和NSOperationQueue ...

  2. ios之UIPopoverController

    UIPopoverController是iPad上的iOS开发会常用到的一个组件(在iPhone设备上不允许使用),这个组件上手很简单,因为他的显示方法很少,而且参数简单,但我在使用过程中还常碰到各种 ...

  3. Swift在1.2版本的变化

    从Xcode 6.3 Beta Release Notes看出,Xcode 6.3 Beta包含了很多颇为值得开发者期待的改变,共计50多处改动,同时修改了Objective-C的语法,足见苹果对Sw ...

  4. mycat中间件安装与使用

    前提: 安装JDK版本在7.0及其以上 1.下载: 下载地址在:http://dl.mycat.io/ 选择1.6-release版本下载 2.安装: 直接解压即可: tar -zxf Mycat-s ...

  5. leepcode(斐波那契数列与float("inf")无穷大)解析

    12.加一 给定一个由整数组成的非空数组所表示的非负整数,在该数的基础上加一. 最高位数字存放在数组的首位, 数组中每个元素只存储一个数字. 你可以假设除了整数 0 之外,这个整数不会以零开头. 示例 ...

  6. django第10天(聚合查询,常用字段)

    django第10天 聚合查询 聚合函数的使用场景 单独使用:不分组,只查聚合结果 分组使用:按字段分组,可查分组字段与聚合结果 导入聚合函数 from django.db.models import ...

  7. solr 日志配置

    配置Solr日志记录 临时记录设置 您可以使用Admin Web界面来控制Solr中的日志输出量.选择LOGGING链接.请注意,此页面只允许您更改正在运行的系统中的设置,并不会保存在下一次​​运行中 ...

  8. PAT Basic 1022

    1022 D进制的A+B 输入两个非负10进制整数A和B(<=2^30^-1),输出A+B的D (1 < D <= 10)进制数. 输入格式: 输入在一行中依次给出3个整数A.B和D ...

  9. UnicodeDecodeError: 'gbk' codec can't decode byte 0xae in position 167: illegal multibyte sequence

    UnicodeDecodeError: 'gbk' codec can't decode byte 0xae in position 167: illegal multibyte sequence文件 ...

  10. LA 4256 DP Salesmen

    d(i, j)表示使前i个数满足要求,而且第i个数值为j的最小改动次数. d(i, j) = min{ d(i-1, k) | k == j | G[j][k] } #include <cstd ...