9

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.

tjcss
  • 856
  • 1
  • 12
  • 33

3 Answers3

12

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>
Nina Scholz
  • 376,160
  • 25
  • 347
  • 392
  • 1
    you could've used string.replace(/\b(\d)\/(\d)\b/g, '&frac$1$2;'); – marvel308 Sep 01 '17 at 08:32
  • Thank you both, could I use this to treat the string as a div? In the HTML I actually have this:
    Corrugated Box # 7 1/8 x 5 7/8 x 14 1/2" (180 x 150 x 370mm)
    so this becomes var string = '.product-name'     – tjcss Sep 01 '17 at 08:37
3

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.

Cerbrus
  • 70,800
  • 18
  • 132
  • 147
  • Thanks, I didn't know that there are a limited set of entities. Your solution fixes that. However, I've tried changing var str to the div that holds the string, and I can't make it work. I tried: var str = '.product-name'; – tjcss Sep 01 '17 at 08:58
  • now it looks like a dupe: https://stackoverflow.com/questions/173332/how-should-i-express-fractions-like-15-16ths-in-html – Nina Scholz Sep 01 '17 at 09:00
  • @tjcss: I've updated my answer. Since you've already tagged your question with jQuery, I made use of jQuery. – Cerbrus Sep 01 '17 at 09:06
  • @NinaScholz: I'd consider the replacement logic a significant portion of the question. – Cerbrus Sep 01 '17 at 09:06
  • Thank you, I've tried this code on this page but it's either not firing or not working: https://www.bagnboxman.co.uk/product/0215-e-flute-carton-180-x-150-x-370mm-with-50mm-dia-hole/ - the source file is inhouse.js in the code btw. – tjcss Sep 01 '17 at 09:09
  • @tjcss: It looks like that site has removed jquery's `$` variable, but you can still use `jQuery()`. I've updated my answer. That code did work when I inserted it on the page. – Cerbrus Sep 01 '17 at 09:13
  • A styling suggestion: `sub{ display: inline-block; margin-left: -4px;} sup{ display: inline-block; margin-right: -4px;}` – Cerbrus Sep 01 '17 at 09:16
  • I can see the logic in your code, and it looks like the right solution, but I have just updated my code with your updated answer and it's not working - it's beyond my knowledge as to why? I have the script src tag in my head element, struggling.. – tjcss Sep 01 '17 at 09:22
  • Try to place the tag at the bottom of the page. If the script runs before the text is loaded, it can not change the text. – Cerbrus Sep 01 '17 at 09:27
  • 1
    Bingo. That's done it. Obvious, really. Source order. Thank you everyone. – tjcss Sep 01 '17 at 09:30
  • Great :D Thanks for accepting the answer! I'm glad to be of help. – Cerbrus Sep 01 '17 at 09:31
1

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;
Bishop
  • 23
  • 1
  • 5