javascript - 在javascript中将XML属性转换为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

递归处理节点的子节点:

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)都是为处理此类问题而设计的。