CODEWITHSUNDEEP
javascriptjquery
tjcss
tjcss

Reputation: 860

Convert part of string of text to fractions

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.

Upvotes: 9

Views: 1217

Answers (3)

Bishop
Bishop

Reputation: 131

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;

Upvotes: 1

Cerbrus
Cerbrus

Reputation: 72947

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 &frasl;:

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.com/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.

Upvotes: 3

Nina Scholz
Nina Scholz

Reputation: 386736

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>

Upvotes: 12

Related Questions