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) {
const keyPattern = /"key":\s*"([^"]*)"/;
const matches = strs.match(keyPattern);
const m1 = matches[1]
return this.isN(m1)
},
normalizeKeyNewlines(str) {
var pattern = /"key":\s*"([^"]+)"/;
return str.replace(pattern, function(match, p1) {
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>