1

<textarea>入力をhtml形式のリストに変換する単純なJavascriptコンバーターを作成する必要があります。

サンプル入力は次のようになります。

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>

誰かがそれを行うためのサンプルコードを提供できますか？どうもありがとう

4

1 に答える 1

1

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

このソリューションは多くのエラーチェックを行わないことに注意してください。入力に注意しないとかなり混乱しますが、やりたいことを行うための出発点になるはずです。ここでライブデモを参照してください：http：//jsfiddle.net/GUQXf/4/

于 2012-09-26T20:28:43.237 に答える