关于textarea中换行、回车、空格的识别与处理

最新推荐文章于 2023-06-01 09:30:59 发布

原创最新推荐文章于 2023-06-01 09:30:59 发布 · 5.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#textarea

前端同时被 2 个专栏收录

6 篇文章

订阅专栏

HTML

1 篇文章

订阅专栏

本文探讨了在textarea中输入文字时，如何处理换行、回车和空格，以确保在后台输出时能保留原始格式。针对IE9以上、FF和Chrome的兼容性问题，提出了两种解决方案：一是将特殊字符替换为HTML实体，二是替换为ASCII码。同时，文章提醒注意replace方法的使用以及检测字符串中特殊字符位置的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

###需求：
在textarea中输入文字，提交给后台后，后台输出在另一个页面，文字按原格式显示。

###兼容性：
IE9以上、FF、chrome在换行处匹配/\n/ IE7-8在换行处先匹配/\r/，再匹配/\n/

###问题解决：

1、把\n \r\n \s 分别替换为
这种情况是替换后的字符串能够被网页解析，这样在网页上就能看到换行、空格等特殊字符了。
具体实现：

//原始字符串
var string = "欢迎访问!\r\nhangge.com    做最好的开发者知识平台";
//替换所有的换行符
string = string.replace(/\r\n/g,"<br>")        //兼容i7、i8
string = string.replace(/\n/g,"<br>");        //i9及以上
//替换所有的空格（中文空格、英文空格都会被替换）
string = string.replace(/\s/g,"&nbsp;");
//输出转换后的字符串
console.log(string);

如果你要替换为空时可以这样写

//原始字符串
var string = "欢迎访问!\r\nhangge.com    做最好的开发者知识平台";
//去掉所有的换行符
string = string.replace(/\r\n/g,"")
string = string.replace(/\n/g,"");
//去掉所有的空格（中文空格、英文空格都会被替换）
string = string.replace(/\s/g,"");
//输出转换后的字符串
console.log(string);

2、把\n \r \s 分别替换为ASCII码的chr(10)、chr(13)、chr(32)
这种情况是替换成html标签后的字符串不能够被网页解析，这样在网页上就只看到一串字符串而已，而替换成ascii码则可以在任何地方显示出换行、空格。
具体实现：（js）

//原始字符串
var string = "欢迎访问!\r\nhangge.com    做最好的开发者知识平台";
//去掉所有的换行符
string = string.replace(/\r/g,String.fromCharCode(13))
string = string.replace(/\n/g,String.fromCharCode(10));
//去掉所有的空格（中文空格、英文空格都会被替换）
string = string.replace(/\s/g,String.fromCharCode(32));
//输出转换后的字符串
console.log(string);

###注意：

1、var str=‘aabbccaa’; str=str.replace(‘aa’,‘dd’);
使用replace方法替换字符串用上面的写法，它只替换第一次出现的，之后不在替换。如果你要替换全部，要使用正则写法：str=str.replace(/aa/g,‘dd’);

2、使用document.getElementById(“ts”).value.indexOf("\n");可以获取字符串出现的第一次的位置，通过这个可以判断字符串是否存在。