Menü aus MS Word XML erstellen

802
Scott

Ich habe kürzlich einige jQuery zusammengestellt, die es einem Benutzer ermöglicht, eine Liste mit Aufzählungszeichen in MS Word mit Hyperlinks aufzubauen und diese in eine ungeordnete HTML-Liste umzuwandeln. Verwendungsideen sind Website-Menüsysteme, bei denen der Benutzer keine Ahnung von HTML hat. Sie können dies auch mit jQuery-UI-Plugins für Effekte erweitern. Auf der Suche nach Randfällen.

/*
    The following will read in a bullet list from in a MS Word XML file and turn it into a 
    unordered list with hyperlinks. Perhaps to use as a menu.
*/
$.ajax({
    type: "GET",
    async: false,
    url: "Menu.xml",
    dataType: "xml",
    success:function(results){
        var currentDepth = 0;
        $("#menu").append('<ul class="menuLvl'+currentDepth+'"></ul>');
        $(results).find("[nodeName=w:p]").each(function(){
            if($(this).find("[nodeName=w:pStyle]").attr('w:val') == 'ListParagraph'){
                var liValue = $(this).find("[nodeName=w:t]").text();
                var hyper = $(this).find("[nodeName=w:hyperlink]").attr('r:id');
                var placeAtDepth = parseInt($(this).find("[nodeName=w:ilvl]").attr('w:val'), 10);

                if(placeAtDepth > currentDepth){
                    $(".menuLvl"+ currentDepth).append('<ul class="menuLvl'+ placeAtDepth +'">');
                }   

                currentDepth = placeAtDepth;

                //Determine if we have an hyperlink
                if(hyper != null){
                    var link = $(results).find('Relationship[Id='+hyper+']').attr('Target');
                    liValue = '<a href="'+ link +'">'+ liValue +'</a>';
                }

                $(".menuLvl"+currentDepth).last().append('<li>'+ liValue +'</li>');
            }
        });
    }
});
Antworten
7

1 Antwort auf die Frage

5
TryPyPy

Sieht gut aus (vielleicht hilft eine strengere Formatierung der Lesbarkeit, aber kein Problem). Ich werde daher optionale Verbesserungen vorschlagen, die möglicherweise wichtige Verbesserungen erkennen lassen.

Versuchen Sie grundsätzlich, für falsche Werte in Ihrer Eingabe bereit zu sein, damit Sie keinen Quatsch erzeugen können . Wenn Sie robuster sind, wird auch die Wiederverwendung des Codes für etwas andere Aufgaben einfacher.

$.ajax({
/// [...]
    success:function(results){
/// [...]
        $(results).find("[nodeName=w:p]").each(function(){
            if($(this).find("[nodeName=w:pStyle]").attr('w:val') == 'ListParagraph'){
                var liValue = $(this).find("[nodeName=w:t]").text();
/// -^ What if the input has an empty value here? Skip? 

                var hyper = $(this).find("[nodeName=w:hyperlink]").attr('r:id');
                var placeAtDepth = parseInt($(this).find("[nodeName=w:ilvl]").attr('w:val'), 10);
/// -^ parseInt can return a NaN, maybe you want to bail out in that case?
///    Should also handle some bogus results for .find.

                if(placeAtDepth > currentDepth){
                    $(".menuLvl"+ currentDepth).append('<ul class="menuLvl'+ placeAtDepth +'">');
                }

                currentDepth = placeAtDepth;

                //Determine if we have an hyperlink
                if(hyper != null){
                    var link = $(results).find('Relationship[Id='+hyper+']').attr('Target');
/// -^ This can result in an invalid link for broken input. But what if
       the input is malicious (JS hrefs)? 

                    liValue = '<a href="'+ link +'">'+ liValue +'</a>';