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-tags，即上面应该变成类似

的东西

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/

在javascript中将XML属性转换为HTML标记

2 个答案: