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

我的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>

这是我读入javascript对象的更大xml文件的一部分，所以这需要在javascript中实现。从概念上讲，我只想从最底层开始，走出去，但我找不到一个好的方法来做到这一点。没有嵌套，用一些简单的方法在所有

style

节点之间循环

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

var htmlstring=“”；
if（node.attributes.face.value==“斜体”）{
htmlstring+=“”+node.textContent+“”
} 

可以。但很明显，一旦我有了巢穴，这就行不通了。

---

必须有一个优雅的解决方案，我只是忽略了，对吗？

递归地处理

节点的子节点：

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

函数替换样式（节点）{
var htmlstr=“”；
（功能repl（节点）{
如果（！节点）{
返回；
}
if（node.attributes&&
node.attributes.face&&
node.attributes.face.value==“斜体”）{
//我只是建立一个简单的字符串，但你可以
//对这里的每一个元素都做你需要做的事情
htmlstr+=“”+node.textContent+“”；
}
对于（var i=0；i

使用树状结构时，这是一个非常常见的问题。您希望对
节点
应用一些函数，然后对其每个子节点以及它们的每个子节点执行相同的操作（依此类推）。事实上，这种情况非常普遍，以至于有一些完整的编程语言（例如XSLT）被设计用于处理这种类型的问题。
为了简洁起见，它使用了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() );

var xml=$.parseXML（'plainbolditalics和boldjust italics'），
$title=$（xml）.find（'title'），
$styles，
htmlString=''；
while（（$style=$title.find（'style'））.length）{
$styles.each（函数（）{
var$style=$（这个）；
开关（$style.attr（'face'））{
大小写“粗体”：
$style.replaceWith（“”+$style.html（）+“”）；
打破
斜体字：
$style.replaceWith（“”+$style.html（）+“”）；
打破
违约：
$style.replaceWith（“”+$style.html（）+“”）；
打破
}
});
}
log（$title.html（））；

您使用什么来解析XML？奇怪的是，像jQuery.Thank这样的实用程序会让这类事情变得更容易——不幸的是，这是在导入程序中运行的，所以jQuery已经过时了。应该说明的，不用担心。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() );