JSFiddle - React, Tailwind, and code Playground

JavaScript

var xml = $.parseXML('<REF_IMAGE_BANK name="Object 3">
<Number_of_acquired_images value="13" />
<Calculated_frame_period value="186987" />
<Calculated_minimum_delay_time value="291360" />
<Number_of_ignored_trigger_pulses value="0" />
<Number_of_overflow_trigger_pulses value="0" />
<Number_of_inspections value="13" />
<Number_of_frames_in_which_no_match_was_found value="2" />
<Number_of_frames_with_match_and_all_pass value="0" />
<Number_of_frames_with_match_and_any_fail value="11" />
<Number_of_frames_with_no_match_and_any_fail value="0" />
<Number_of_frames_with_blob_tool_timeout value="0" />
<Estimated_acquisition_time value="104366" />
<Estimated_analysis_time value="146989" />
<Readout_mode_seq_sim value="0" />
<Readout_time value="14980" />
<Estimated_FPGA_time value="89386" />
<System_time value="39998" />
<Acquisition_timings value="89434 : 0 0 0 13 0 0 0" />
<Analysis_timings value="mean: 115482 max: 117631 hist: 0 0 0 13 0 0 0" />
<Analysis_bailouts value="0 : 0 0 0 0 0 0 0 0 0 0 0" />
</REF_IMAGE_BANK>
 
'),
    $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() );