How to format half size with <sup> tag?

Question

Below is a function for joining words. Given the first or last word could be a string like 7 1/2, how would I ensure that; if the word contains a fraction, format the fraction with (superscript) tags.. so it shows nicely like below?

export const joinWords = (words: string[]): string => {
    if (words.length === 1) {
        return words[0];
    }
    const firstWords = words.slice(0, words.length - 1);
    const lastWord = words[words.length - 1];
    const oxfordComma = words.length > 2;

    //if firstWords or lastword contains "/"...Logic???

    return firstWords.join(', ') + `${oxfordComma ? ', ' : ''} and ${lastWord}`;
};

Answer 1

I found an alternate way, where I use the replace method. I am using svelte hence the onmount..

onMount(() => {
//join the words
        const test = joinWords(optionNames);
//replace the "1/2" since I am only using 1/2 for clothing sizes...this may not work for other fractions..
        const newTest = test.replace('1/2', '½');
        testWord = newTest;
    });

//be sure to return as html...again im in svelte.
<span>{@html testWord} </span><br />