Yêu cầu thg 3 9, 2020 10:17 SA 682 0 3
  • 682 0 3
+1

Hỏi về việc hiển thị dấu xuống dòng khi render

Chia sẻ
  • 682 0 3

mọi người ơi, cho hỏi là e có làm 1 web cho người dùng nhập văn bản bằng expressJs + mongodb, làm sao để lúc người ta nhập văn bản, bấm enter xuống dòng thì lúc e hiển thị ra cho người ta sửa văn bản thì nó cũng xuống dòng ạ ? :3

Avatar Tran Nghia @taiken
thg 3 9, 2020 3:44 CH

xài library cho nhanh. markdown-it hoặc codemirror

3 CÂU TRẢ LỜI


Đã trả lời thg 3 9, 2020 10:51 SA
Đã được chấp nhận
+5

Để chuyển đổi ký hiệu xuống dòng (\n hoặc \r\n) mà người dùng nhập vào thành xuống dòng thực sự khi hiển thị ra giao diện thì có một số hướng sau đây nhá:

Sử dụng CSS white-space: pre-line

<span style="white-space: pre-line">Cộng hòa xã hội chủ nghĩa Việt Nam
Độc lập tự do hạnh phúc</span>

Xem ví dụ tại JSFiddle này: https://jsfiddle.net/0mcpahrj/

Chuyển đổi ký hiệu xuống dòng sang thẻ <br>

Cách này thì bạn chỉ cần thay thế mọi ký tự \n sang thẻ <br> là được. Đối với Javascript/Nodejs thì bạn có thể dùng cách thế này hoặc tương tự:

str.replace(new RegExp('\n', 'g'), '<br>')

Sau mỗi lần xuống dòng (hoặc 2 dấu xuống dòng) thì gói từng đoạn riêng lẻ vào thẻ đoạn văn <p>:

str
  .replace(new RegExp('\r\n', 'g'), '\n')
  .split('\n\n')
  .map(p => `<p>${p}</p>`)
  .join('')

Xem ví dụ ở đây: https://jsfiddle.net/r9f17uej/

Dùng luôn một thư viện parse markdown cho xịn sò ở frontend

Một số thư viện như markdown-it chẳng hạn. Vấn đề hiển thị xuống dòng của bạn sẽ tự được thư viện đó giải quyết, và còn được thêm cú pháp markdown nữa :v

Nhớ rằng cách giải quyết đẹp nhất luôn là xử lý dữ liệu (thêm xuống dòng, format văn bản) khi chuẩn bị đưa dữ liệu ra view, hoặc ở phía frontend.Nên tránh biến đổi trước khi đưa dữ liệu vào CSDL nhé.

Chia sẻ
thg 3 9, 2020 12:06 CH

e cảm ơn anh ạ , e cũng đang dùng markdown, mà lỗi là do e dùng req.body.content.replace(/\s+/g, " ").trim() trước khi lưu vào DB nên nó mất cái dấu xuống dòng @@ a cho e hỏi là e muốn loại bỏ nhiều dấu cách do người dùng tạo ra ở 2 bên, và nhiều dấu cách giữa 2 chữ thì e nên sửa lại như thế nào ạ ? e hiểu cái \s kia khớp với một kí tự khoảng trắng, bao gồm trống - space, tab, phân trang - form feed, phân dòng - line feed..còn /g e k hiểu ạ :3

Avatar Le Hong Phuc B @le.hong.phucb
thg 3 9, 2020 4:59 CH

@at3s str.replace( / +/g, " " )

thg 3 9, 2020 5:21 CH

@le.hong.phucb ok rồi, cảm ơn bạn nha, chúc bạn ngủ ngon

Avatar Trần Xuân Thắng @tranxuanthang
thg 3 10, 2020 1:14 SA

@at3s Còn cái g đơn giản ý nghĩa là có thể match nhiều lần trong cả văn bản nhé (global). Nếu không có g thì câu lệnh của bạn sẽ chỉ replace được mỗi ký tự dấu cách đầu tiên thôi :v

thg 3 10, 2020 1:48 SA

@tranxuanthang vâng, mà a ơi asdasdasd.jpg a có biết sửa cái lỗi này thế nào k ạ ? :3 do e dùng laban key, viết nó cứ kiểu gạch chân như trong ảnh, trong simpledme e để spellChecker= false rồi mà vẫn bị :3

Avatar Trần Xuân Thắng @tranxuanthang
thg 3 10, 2020 1:54 SA

@at3s Mình nghĩ là không có cách nào đâu. Gạch chân là ám hiệu preedit chỉ rằng từ hiện tại đang được sửa của bàn phím/input method, không liên quan đến spellcheck lắm

thg 3 10, 2020 1:56 SA

@tranxuanthang ui chán nhỉ :3 trên web chạy ngon mà đt lại hơi k ngon @@ kb mấy web khác người ta làm thế nào a nhỉ ? ví dụ như viblo ý

Avatar Trần Xuân Thắng @tranxuanthang
thg 3 10, 2020 2:17 SA

@at3s Viblo cũng để nguyên thế thôi bạn à. Với cả đấy cũng không phải vấn đề gì lắm đâu :v

thg 3 10, 2020 2:18 SA

@tranxuanthang e viết ở viblo thấy bình thường mà qua web của e bị lỗi vậy thấy hơi pùn 😅😅

Đã trả lời thg 3 9, 2020 10:49 SA
+1

bạn thử dùng thuộc tính css này xem

white-space: pre;
Chia sẻ
thg 3 9, 2020 11:41 SA

e cảm ơn ạ

Avatar Tran Nghia @taiken
thg 3 9, 2020 3:44 CH
Đã trả lời thg 3 9, 2020 10:24 SA
0

Mình phỏng đoán là bạn bắt sự kiến ấn "Enter". sau đó chuyển nó thành kí tự trong bảng mã ASCII là đc.

Chia sẻ
thg 3 9, 2020 11:41 SA

e cảm ơn ạ

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí