Question

我有一个字符串，它是产品名称和产品尺寸：

（来源：https://www.bagnboxman.co.uk/product/0215-e-flute-carton-180-x-150-x-370mm-with-50mm-dia-hole/）

瓦楞纸箱＃7 1/8 x 5 7/8 x 14 1/2“（180 x 150 x 370mm）

我想把它转换成这个：

瓦楞纸箱
7⅛x5⅞x14½“（180 x 150 x 370mm）

我已经将＃符号放入以便于使用，因此我可以搜索＃并将其转换为换行符（br）。

然后我还要查找英寸分数并将它们转换为适当的..

½

..代码。

我该怎么做呢？我今天早上广泛地谷歌并尝试了一些事情，但只是无法解决这个问题。我害怕我只有基本的JS知识。

Answer 1

您可以搜索空格，数字，斜线和其他数字，然后返回所需的格式。

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;

要更改类product-name的所有div，您可以迭代元素。

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>

Answer 2

这是一个更灵活的解决方案，不依赖&fracXY;个&frasl;个实体。相反，它使用＆＃34; Fraction slash＆＃34;字符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. ); } );：

＆＃13;

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

＆＃13;

<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>

＆＃13;

ports:
    - 9500:9300

＆＃13;

另一个优点是你可以单独设置部分的部分样式。

将部分文本字符串转换为分数

2 个答案: