在javascript中转换XML属性inot HTML标记

Question

我的XML (稍微简化一下)如下所示：

<title>
  <style face="normal">Plain</style>
  <style face="bold">Bold</style>
  <style face="italic">Italics
    <style face="bold">italics and bold</style>
  just italics</style>
</title>

style节点可以嵌套在多个层次上。我想将"face“属性转换为html标记，即上面的内容应该变成类似的内容。

Plain<b>Bold</b><i>Italics<b>italics and bold</b>just italics</i>

这是我正在读取到javascript对象的一个更大的xml文件的一部分，所以这需要在javascript中实现。从概念上讲，我只想从最低层次开始，然后向外走，但我找不到一个好的方法来做到这一点。无需嵌套，只需简单地遍历所有style节点。

var htmlstring = "";
if (node.attributes.face.value == "italic"){
  htmlstring += "<i>" + node.textContent + "</i>"
} 

就行了。但很明显，一旦我有了巢，那就行不通了。一定有一个优雅的解决方案，我只是忽略了，对吧？

Answer 1

递归地处理node的子级：

function replaceStyles(node) {
    var htmlstr = "";
    (function repl(node) {
        if (!node) {
            return;
        }
        if (node.attributes && 
            node.attributes.face &&
            node.attributes.face.value == "italic") {
            // I'm just building up a simple string, but you can
            // do whatever you need to with each element here
            htmlstr += "<i>" + node.textContent + "</i>";
        }
        for (var i = 0; i < node.children.length; i++) {
            repl(node.children[i], htmlstr);
        }

    })(node);
    return htmlstr;
}

当使用类似树的结构时，这是一个非常常见的问题。您希望将一些函数应用于node，然后对其每个子程序执行相同的操作，然后对它们的每个子级执行相同的操作(等等)。它是如此普遍，事实上，有完整的编程语言(例如XSLT)被设计来解决这种类型的问题。

Answer 2

为了简洁起见，这使用jQuery。如果您需要纯JS解决方案，请告诉我。

注意:我知道OP没有要求jQuery。

var xml = $.parseXML('<title><style face="normal">Plain</style><style face="bold">Bold</style><style face="italic">Italics<style face="bold">italics and bold</style>just italics</style></title>'),
    $title = $( xml ).find('title'),
    $styles,
    htmlString = '';

while( ($styles = $title.find('style')).length ) {
    $styles.each(function() {
        var $style = $(this);
        switch( $style.attr('face') ) {
            case "bold":
                $style.replaceWith('<b>' + $style.html() + '</b>');
                break;
            case "italic":
                $style.replaceWith('<i>' + $style.html() + '</i>');
                break;

            default:
                $style.replaceWith('<span>' + $style.html() + '</span>');
                break;
        }
    });
}

console.log( $title.html() );

http://jsfiddle.net/ryanwheale/dr29J/