str转换

98 阅读1分钟
let str1 = '{\n  "look": "false",\n  "key": "-----BEGIN RSA PRIVATE KEY-----\nsffgggggsssaasggg/0fffffghomffd1\ndjgjgkfkbkkbkvlfmkv=\n-----END RSA PRIVATE KEY-----"\n}';
let str2 = '{"look": "false","key": "-----BEGIN RSA PRIVATE KEY-----\nsffgggggsssaasggg/0fffffghomffd1\ndjgjgkfkbkkbkvlfmkv=\n-----END RSA PRIVATE KEY-----"\n}';
let str4 = '{"look": "false","key": "-----BEGIN RSA PRIVATE KEY-----\\nsffgggggsssaasggg/0fffffghomffd1\\ndjgjgkfkbkkbkvlfmkv=\\n-----END RSA PRIVATE KEY-----"\\n}';
if (this.normalizeKeyNewlines2(str1)) {
    console.log(this.normalizeKeyNewlines(str1),'11111');
    console.log(this.normalizeKeyNewlines(str2),'22222222');
    console.log(this.normalizeKeyNewlines(str4),'4444');
}

isN(text){
    return text.includes('\n')
},

normalizeKeyNewlines2(strs) {
    // 目标是找到 key 字段的值并替换其中的换行符
    const keyPattern = /"key":\s*"([^"]*)"/;
    const matches = strs.match(keyPattern);
    const m1 = matches[1]
    return this.isN(m1)
},
normalizeKeyNewlines(str) {
    // 正则匹配 "key" 字段值,捕获所有内容
    var pattern = /"key":\s*"([^"]+)"/;
    // 替换 "key" 字段值中的所有 \n 为 \\n
    return str.replace(pattern, function(match, p1) {
        // 将匹配到的字段值中的 \n 替换为 \\n
        return `"key": "${p1.replace(/\n/g, '\\\\n')}"`;
    });
},

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue and Bootstrap Switch Example</title>
    <!-- 引入 Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- 引入 Bootstrap Switch -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.min.css">
    <style>
        .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-handle-on,
        .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-handle-off {
            color: #fff; /* 文字颜色 */
        }
        .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-handle-on {
            background: green; /* 默认开启状态的背景色 */
        }
        .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-handle-off {
            background: red; /* 关闭状态的背景色 */
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <table style="width: 50%;height: 200px;border: 1px solid black;">
            <thead>
                <tr>
                    <th>State</th>
                    <th>Operation</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in arr">
                    <td><input type="checkbox" class="switch" :checked="item.state" v-on:change="toggleSwitch"></td>
                    <td>btn</td> 
                </tr>
            </tbody>
        </table>
        
    </div>

    <!-- 引入 Vue -->
    <!-- 引入 jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入 Bootstrap 的 JavaScript 库 -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- 引入 Bootstrap Switch -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                arr: [
                    {id: 1, state: true},
                    {id: 2, state: false},
                    {id: 3, state: true},
                ]
            },
            mounted: function() {
                // 初始化每个开关
                $(this.$el).find('.switch').each((index, element) => {
                    $(element).bootstrapSwitch({
                        onColor: 'green',
                        offColor: 'red',
                        onSwitchChange: (event, state) => {
                            if (state) {
                                $(element).closest('.bootstrap-switch').find('.bootstrap-switch-handle-off').css('background-color', 'yellow');
                            }
                        }
                    });

                    // 如果初始状态为true,设置背景为黄色
                    if (this.arr[index].state) {
                        $(element).closest('.bootstrap-switch').find('.bootstrap-switch-handle-off').css('background-color', 'yellow');
                    }
                });
            },
            methods: {
                toggleSwitch: function () {
                    console.log('State changed.');
                }
            },
        });
    </script>
</body>
</html>