javascript - 如何将类属性应用于 HTML 字符串(未呈现在文档上)

Question

我正在为 am automator 开发代码，以改进多个页面的项目。

我有一个 textarea 输入，我可以在其中输入 HTML，它会向我显示具有正确结构的 HTML。

HTML:

<textarea name="message">
<input type="text" value="TextTwo" id="texttwo"/>
<input type="text" value="DataOne" id="dataone"/>
<input type="text" value="NumberTwo" id="numbertwo"/>
<input type="text" value="TextOne" id="textone"/>
<input type="text" value="DataTwo" id="datatwo"/>
<input type="text" value="NumberOne" id="numberone"/>
</textarea>

<button>process</button>

JS/JQuery:

$('button').click(function () {
    var code = $('textarea[name=message]').val();

    if ($('#output').length < 1) {
        $("body").append('<h2>Output</h2><textarea id="output" rows="10" cols="100"></textarea>');
    }        



    $('#output').val(code);
});

我想按照以下规则申请类(class):

• 在应用 class = "text" 时具有单词“Text”值的输入
• 在应用class = "data"时具有单词“Data”值的输入
• 在应用 class = "number" 时包含单词“Number”值的输入

代码如何在文本区域中输出的示例

<input type="text" value="TextTwo" id="texttwo" class="text" />
<input type="text" value="DataOne" id="dataone" class="data" />
<input type="text" value="NumberTwo" id="numbertwo" class="number" />
<input type="text" value="TextOne" id="textone" class="text"/>
<input type="text" value="DataTwo" id="datatwo" class="data" />
<input type="text" value="NumberOne" id="numberone" class="number" />

<强> DEMO CODE

使用 JQuery 执行此操作的好方法是什么？

Answer 1

我更新了你的 fiddle 并让这段代码正常工作——无法给你链接，因为我实际上没有 fiddle 帐户:

$('button').click(function () {
    var code = $('textarea[name=message]').val();

    // The best thing to do here is to turn that string of HTML into
    // DOM elements and let the browser do the work.

    var elms = jQuery.parseHTML(code);
    var result = "";

    // Now that we've processed the HTML into an array, work with it.
    for (var i = 0; i < elms.length; i++) {
        var el = elms[i];
        if (el.tagName && el.tagName.toLowerCase() === "input") {
            // Great! We we have an 'input' element.
            var val = el.value;

            if (val.indexOf("Text") !== -1) {
                el.className = "text";
            }
            if (val.indexOf("Data") !== -1) {
                el.className = "data";
            }
            if (val.indexOf("Number") !== -1) {
                el.className = "number";
            }            
        }

        if (el.nodeType === 3) {
            // Handle text nodes
            result += el.nodeValue;
        } else {
          result += el.outerHTML;
        }        
    }


    if ($('#output').length < 1) {
        $("body").append('<h2>Output</h2><textarea id="output" rows="10" cols="100"></textarea>');
    }        



    $('#output').val(result);
});