將textarea內容轉換爲html

我需要製作一個簡單的Javascript轉換器，它會將<textarea>輸入轉換爲html格式的列表。
將textarea內容轉換爲html

這是一個範例輸入是什麼樣子：

Brand: Brand1 
    Model1 /Model2 /Model3 /Model4 /Model5 /Model6/
Brand: Brand2 
    Model1 /Model2 /Model3 /Model4 /Model5 /Model6/

，這將是轉換後的HTML：

<h3>Brand1</h3> 
<ul> 
    <li>Model1</li> 
    <li>Model2</li> 
    <li>Model3</li> 
    <li>Model4</li> 
    <li>Model5</li> 
    <li>Model6</li> 
</ul> 
<h3>Brand2</h3> 
<ul> 
    <li>Model1</li> 
    <li>Model2</li> 
    <li>Model3</li> 
    <li>Model4</li> 
    <li>Model5</li> 
    <li>Model6</li> 
</ul>

可以在任何一個提供一些示例代碼來做到這一點？非常感謝

來源

2012-09-26 Kuwiuwuw Kurwiow

如果您使用jQuery，這會容易得多...是否有這種可能性？ –

我同意ethan，你將需要一個jquery函數和正則表達式來找到你正在尋找的東西，並應用這些標籤 – kingkode

如果輸入格式沒有設置，我可以建議一些現有的，支持良好的標記語言，如[Markdown]（http://daringfireball.net/projects/markdown/dingus）和[Textile]（http://www.txstyle.org/）？ – Andrew

jQuery的將是簡單的方法來做到這一點，但如果你被迫與純JavaScript做到這一點，你就會有一些看起來像這樣：

HTML：

<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>

的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; 
};

請注意，此解決方案不會做了很多錯誤檢查的，如果你不小心你的inpu它會得到很困惑噸，但它應該給你一個起點去做你想做的事。在這裏看到一個現場演示：http://jsfiddle.net/GUQXf/4/

來源

2012-09-26 20:28:43

謝謝，這正是我需要的！ –

將textarea內容轉換爲html

回答

相關問題