js实现去文本换行符小工具

时间：2022-02-05 08:34:53

js实现去文本换行符小工具

一、总结

一句话总结：

1、vertical属性使用的时候注意看清定义，也注意父元素的基准线问题。vertical-align:top;

2、获取textareaElement的value属性行，而innerHTML属性不行，赋值的时候可以直接赋值给innerHTML。var textSourse=textarea_source.value;

3、js中的replace函数等字符串方法是str对象的方法。 textSourse=textSourse.replace(/\n/mg,' ');

4、js中正则表达式用的时候不要在正则式上门加引号。textSourse=textSourse.replace(/\n/mg,' ');

 

 

二、js实现去文本换行符小工具

1、截图

js实现去文本换行符小工具

 

 

2、代码

 1 <!DOCTYPE html>
 2 <html lang="cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>QuickBlogToolKits</title>
 6     <!--可以用amazeui，大不了把amazeui的那些样式复制粘贴进来就好，弄在style里面-->
 7     <link rel="stylesheet" href="css/amazeui.min.css">
 8     <style>
 9         .my_title{
10             /*width: 200px;*/
11             margin: 50px 400px;
12             border-bottom: 10px ridge #939335;
13             font-size: 50px;
14             text-align: center;
15             /*background: beige;*/
16             text-shadow: 3px 3px 2px #8bb076;
17         }
18         .my_part{
19             margin: 35px;
20             border: 5px double #939335;
21         }
22         h2{
23             text-align: center;
24             font-size: 50px;
25             font-weight: bold;
26             font-family: 幼圆;
27             text-shadow: 3px 3px 2px #8bb076;
28             background: beige;
29             margin: 50px 200px;
30             border-left: 5px solid #8bb076;
31             border-right: 5px solid #8bb076;
32         }
33         .my_content{
34             margin: 20px;
35             text-align: center;
36         }
37         textarea{
38             border: 4px ridge #939335;
39         }
40         button{
41             background: ;
42         }
43     </style>
44 </head>
45 <body>
46 <article class="my_title">
47     <h1>QuickBlogToolKits</h1>
48 </article>
49 <article class="my_part">
50     <h2>去换行符，加空格</h2>
51     <div class="my_content">
52         <div style="display: inline-block;">
53             <textarea name="my_source" id="textarea_source" cols="60" rows="15"></textarea>
54         </div>
55         <div style="display: inline-block;margin-top:135px;vertical-align:top;">
56             <button class="am-btn am-btn-success am-radius" style="font-size: 50px;margin: auto 30px;" onclick="trans()">=></button>
57         </div>
58         <div style="display: inline-block;">
59             <textarea name="my_tanslate" id="textarea_translate" cols="60" rows="15" ></textarea>
60         </div>
61     </div>
62     <script>
63         // js如何获取textarea框中的值
64         // textareaElement的value属性行，而innerHTML属性不行
65         function trans(){
66             var textarea_source=document.getElementById('textarea_source');
67             var textarea_translate=document.getElementById('textarea_translate');
68             var textSourse=textarea_source.value;
69             //textSourse=textSourse.replace(/\n/mg,'        ');
70             textarea_translate.innerHTML=textSourse.replace(/\n/mg,'        ');
71             //alert(textSourse);
72         }
73     </script>
74 </article>
75 
76 </body>
77 </html>

 

 

 

 

 

 
 
 
 
 
标签：

相关文章