Home > Web Front-end > Vue.js > How to replace spaces in vue

How to replace spaces in vue

藏色散人
Release: 2022-12-22 09:40:53
Original
4348 people have browsed it

Vue implements the method of replacing spaces: 1. Create a vue sample file; 2. Replace all spaces through the regular expression "string = string.replace(/\s/g," ");"; 3. Use "console.log(string);" to output the replaced string.

How to replace spaces in vue

#The operating environment of this tutorial: Windows 10 system, Vue version 3, Dell G3 computer.

How to replace spaces in vue?

vue: Replace spaces in the string in the copy function, remove newline characters \r\n or \n

1: Copy function

export default {
methods: {
copy(value) {
try{
const textarea = document.createElement('textarea');
document.body.appendChild(textarea);//添加到body中
textarea.value = value;//给dom设置值
textarea.select();//设置选中
const copyFalse = document.execCommand('copy', false);
if(copyFalse){
this.alert('复制成功');
}else{
this.alert('复制失败');
}
textarea.remove();//用完移除dom
} catch {
this.alert('复制失败')
}
}
}
}
Copy after login

2: Replace the spaces, line feeds \r\n or \n in the string

In order to display the carriage return and line feed characters correctly, you need to replace \n or \r\n with < br>. Likewise, replace spaces with . Here we replace it with regular expressions.

1. Replace all spaces, carriage returns and line feeds

//原始字符串
var string = "欢迎访问!\r\nchifanlema.com";
//替换所有的换行符
string = string.replace(/\r\n/g,"<br>")
string = string.replace(/\n/g,"<br>");
 
//替换所有的空格(中文空格、英文空格都会被替换)
string = string.replace(/\s/g," ");
 
//输出转换后的字符串
console.log(string);
Copy after login

2. Remove all spaces, carriage returns and line feeds

//原始字符串
var string = "欢迎访问!\r\nchifanlema.com    ";
 
//去掉所有的换行符
string = string.replace(/\r\n/g,"")
string = string.replace(/\n/g,"");
 
//去掉所有的空格(中文空格、英文空格都会被替换)
string = string.replace(/\s/g,"");
 
//输出转换后的字符串
console.log(string);
Copy after login

Recommended learning: "vue .js video tutorial

The above is the detailed content of How to replace spaces in vue. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template