Hướng dẫn text to html js - văn bản sang html js

Question

Những gì tôi đang cố gắng làm là chuyển đổi nội dung textarea thành mã HTML hợp lệ. Giả sử bạn nhập bên trong TextArea và sau đó bạn nhấn một nút hiển thị văn bản được gõ bên trong một phần tử. Nếu bạn đã gõ một cái gì đó như bên trong Textarea:

Chào các bạn! Bạn có thích jQuery? Tôi làm! Do you like jQuery? I do!
Do you like jQuery?
I do!

Chuỗi kết quả bạn phải đặt bên trong phần tử '' là:

Hi folks!<br>Do you like jQuery?<br>I do!

Đó là bởi vì dòng mới bên trong TextArea phải được chuyển đổi thành thẻ <br>!

Điều tương tự sẽ xảy ra nếu bạn muốn lấy HTML của phần tử và đặt nó vào trường đầu vào TextArea, ví dụ:

Hi folks!<br>Do you like jQuery?<br>I do!

nên được chuyển đổi thành:

Chào các bạn! Bạn có thích jQuery? Tôi làm! Do you like jQuery? I do!
Do you like jQuery?
I do!

Chuỗi kết quả bạn phải đặt bên trong phần tử '' là:

Đó là bởi vì dòng mới bên trong TextArea phải được chuyển đổi thành thẻ <br>!

Điều tương tự sẽ xảy ra nếu bạn muốn lấy HTML của phần tử và đặt nó vào trường đầu vào TextArea, ví dụ:

nên được chuyển đổi thành:

Vì vậy, có cách nào để chuyển đổi một chuỗi thành chuỗi HTML (và ngược lại) hay tôi nên tự viết một chức năng?

var convertButton = document.getElementById('convertButton');
convertButton.onclick = function(){
    var input = document.getElementById('input');
    var output = document.getElementById('output');
    var lines = input.value.split( '\n' );
    var html = '';
    for( var i=0; i<lines.length; i++ ) {
        if( lines[i].indexOf('Brand')===0 ) {
            var brand = lines[i].split(':')[1];
            html += '<h3>' + brand + '</h3>';
        }/*  ww    w.  d   e   mo    2  s.   c o    m*/
        if( lines[i].indexOf('/')!==-1 ) {
            var models = lines[i].split('/');
            html += '<ul><li>' + models.join('</li><li>') + '</li></ul>';
        }
    }
    output.innerHTML = html;
};

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head><!-- w  w  w  .    de   m   o2  s  .    c  om  -->
<body>
    <textarea id="input" rows="5" cols="60">Brand: Brand1
  Model1 /Model2 /Model3 /Model4 /Model5 /Model6
Brand: Brand2
    Model1 /Model2 /Model3 /Model4 /Model5 /Model6
</textarea>
<input id="convertButton" type="button" value="convert" />
<div id="output"></div>
    <script type='text/javascript'>
var convertButton = document.getElementById('convertButton');
convertButton.onclick = function(){
    var input = document.getElementById('input');
    var output = document.getElementById('output');
    var lines = input.value.split( '\n' );
    var html = '';
    for( var i=0; i<lines.length; i++ ) {
        if( lines[i].indexOf('Brand')===0 ) {
            var brand = lines[i].split(':')[1];
            html += '<h3>' + brand + '</h3>';
        }
        if( lines[i].indexOf('/')!==-1 ) {
            var models = lines[i].split('/');
            html += '<ul><li>' + models.join('</li><li>') + '</li></ul>';
        }
    }
    output.innerHTML = html;
};
  </script>
</body>
</html>

Cảm ơn trước!

Trước Sau

Mã nguồn JavaScript
Mã nguồn JavaScript để thực hiện "Textarea chuyển đổi nội dung Textarea thành HTML" là
Trước Sau
Có liên quan
JavaScript TextArea So sánh TextArea
JavaScript Textarea được điều khiển bằng nút radio
JavaScript Textarea Chuyển đổi không gian từ Textarea sang

programming html