I have a string which is a product name and product size:

(source: /)

Corrugated Box # 7 1/8 x 5 7/8 x 14 1/2" (180 x 150 x 370mm)

And I want to convert it to this:

Corrugated Box
7⅛ x 5⅞ x 14½" (180 x 150 x 370mm)

I have put the # sign in for ease of use, so I can search for the # and convert it to a line-break (br).

I then also want to look for the inch fractions and convert them to the appropriate..

½

..code.

How would I go about doing this? I have google extensively this morning and tried a few things but just can't figure this out. I only have basic JS knowledge I'm afraid.

I have a string which is a product name and product size:

(source: https://www.bagnboxman.co.uk/product/0215-e-flute-carton-180-x-150-x-370mm-with-50mm-dia-hole/)

Corrugated Box # 7 1/8 x 5 7/8 x 14 1/2" (180 x 150 x 370mm)

And I want to convert it to this:

Corrugated Box
7⅛ x 5⅞ x 14½" (180 x 150 x 370mm)

I have put the # sign in for ease of use, so I can search for the # and convert it to a line-break (br).

I then also want to look for the inch fractions and convert them to the appropriate..

½

..code.

How would I go about doing this? I have google extensively this morning and tried a few things but just can't figure this out. I only have basic JS knowledge I'm afraid.

• javascript
• jquery

• What are possible values (range) of those fractions? – Cerbrus Commented Sep 1, 2017 at 8:33
• There are about a thousand products with different names and sizes. – tjcss Commented Sep 1, 2017 at 8:41
• Do you need to display fraction other than those listed here? (Not even all of those have an &frac entity alias) – Cerbrus Commented Sep 1, 2017 at 8:50
• 1 I'm not sure. Safe to say "probably"! – tjcss Commented Sep 1, 2017 at 9:08

3 Answers 3

You could search for space, the number, slash and another number and return the wanted format.

var string = 'Corrugated Box # 7 1/8 x 5 7/8 x 14 1/2" (180 x 150 x 370mm)'

string = string.replace(/\s(\d)\/(\d)/g, '&frac$1$2;').replace('#', '<br>');

document.body.innerHTML += string;

For changing all divs of the class product-name, you could iterate the elements.

document.body.onload = function () {
    Array.prototype.forEach.call(document.getElementsByClassName('product-name'), function (element) {
        element.innerHTML = element.innerHTML.replace(/\s(\d)\/(\d)/g, '&frac$1$2;').replace('#', '<br>');
    });
}

<div class="product-name">Corrugated Box # 7 1/8 x 5 7/8 x 14 1/2" (180 x 150 x 370mm)</div>

Here's a more flexible solution that doesn't rely on the limited set of &fracXY; entities out there. Instead, it uses the "Fraction slash" character ⁄:

jQuery('.product-name').html(                       // Set the HTML of all 
    function () {                                   // .product-name elements to:
        return jQuery(this)                         // The current element's
            .html()                                 // HTML,
            .replace(                               // Where we replace
                / ?(\d+)\/(\d+)/g,                  // A space, number-slash-number
                "<sup>$1</sup>&frasl;<sub>$2</sub>" // With a fraction.
            ); 
    }
);

sup { color: red;         }
sub { font-style: italic; }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="product-name">
    Corrugated Box # 7 1/8 x 5 7/8 x 14 1/2" (180 x 150 x 370mm)
    <br />
    And a random fraction 12345/67890
</div>

Another advantage is that you can separately style parts of the fraction.

I know this is an old thread, but after having some issues with fractions displaying properly I discovered the css property font-variant-numeric: diagonal-fractions;

Most modern browsers will format the fraction based on the ⁄ being part of the HTML, but some others seem to not catch it.

.fracDisplay {
    font-variant-numeric: diagonal-fractions;
}

<span class='fracDisplay'>1&frasl;10</span>&Prime;