{"id":3443,"date":"2025-06-12T02:42:50","date_gmt":"2025-06-12T02:42:50","guid":{"rendered":"https:\/\/techtrendfeed.com\/?p=3443"},"modified":"2025-06-12T02:42:50","modified_gmt":"2025-06-12T02:42:50","slug":"extract-a-quantity-from-a-string-with-javascript","status":"publish","type":"post","link":"https:\/\/techtrendfeed.com\/?p=3443","title":{"rendered":"Extract a Quantity from a String with JavaScript"},"content":{"rendered":" \r\n<br><div id=\"main\"><article itemscope=\"\" itemtype=\"http:\/\/schema.org\/Article\">\n<p>Person enter from HTML kind fields is mostly offered to JavaScript as a string.  We have lived with that truth for many years however typically builders have to extract numbers from that string.  There are a number of methods to get these numbers however let&#8217;s depend on common expressions to extract these numbers!<\/p>\n\n\n\n<p>To make use of an everyday expression to get a quantity inside a string, we will use <code>d+<\/code>:<\/p>\n\n\n\n<pre class=\"javascript\">const string = \"x12345david\";\nconst [match] = string.match(\/(d+)\/);\nmatch; \/\/ 12345\n<\/pre>\n\n\n\n<p>Common expressions are able to actually highly effective operations inside JavaScript; this observe is among the simpler operations.  Changing the quantity utilizing a <code>Quantity()<\/code> wrapper provides you with the quantity as a <code>Quantity<\/code> kind.<\/p>\n\n\n\n<div class=\"x x-long x-secondary\">\n    \n    \n    <div class=\"x-secondary-large\">\n    <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/requestmetrics.com\/?utm_source=davidwalsh\" style=\"display:block;\">\n        <img decoding=\"async\" src=\"https:\/\/davidwalsh.name\/demo\/rm_perf_banner-728.min.svg\" style=\"max-width:100%;height:auto;\" alt=\"Request Metrics real user monitoring\" loading=\"lazy\" width=\"728\" height=\"90\"\/>\n    <\/a>\n    <\/div>\n    <div class=\"x-secondary-small\">\n    <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/requestmetrics.com\/?utm_source=davidwalsh\" style=\"display:block;\">\n        <img decoding=\"async\" src=\"https:\/\/davidwalsh.name\/demo\/rm_perf_block_300.min.svg\" style=\"max-width:100%;height:auto;\" alt=\"Request Metrics real user monitoring\" loading=\"lazy\" width=\"300\" height=\"250\"\/>\n    <\/a>\n    <\/div>\n<\/div>\n\n\n\n\n\n<\/article>\n\n<div class=\"article-block\" style=\"min-height:90px\"><div class=\"x x-long x-terciary\" style=\"max-height: none;\">\n  \n    \n    \n<div class=\"x-secondary-large\">\n  <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/requestmetrics.com\/?utm_source=davidwalsh\" style=\"display:block;\">\n    <img decoding=\"async\" src=\"https:\/\/davidwalsh.name\/demo\/rm_perf_banner-728.min.svg\" style=\"max-width:100%;height:auto;\" alt=\"Request Metrics real user monitoring\" loading=\"lazy\" width=\"728\" height=\"90\"\/>\n  <\/a>\n<\/div>\n<div class=\"x-secondary-small\">\n  <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/requestmetrics.com\/?utm_source=davidwalsh\" style=\"display:block;\">\n    <img decoding=\"async\" src=\"https:\/\/davidwalsh.name\/demo\/rm_perf_block_300.min.svg\" style=\"max-width:100%;height:auto;\" alt=\"Request Metrics real user monitoring\" loading=\"lazy\" width=\"300\" height=\"250\"\/>\n  <\/a>\n<\/div>\n\n  \n\n<\/div>\n<\/div>\n\n\n<div class=\"article-block post-more\" style=\"\u201cclear:both;\u201d\"><ul class=\"post-list small-list\"><li data-url=\"https:\/\/davidwalsh.name\/html5-apis\" itemscope=\"\" itemtype=\"http:\/\/schema.org\/Article\"><span itemscope=\"\" itemtype=\"https:\/\/schema.org\/ImageObject\"><img decoding=\"async\" src=\"https:\/\/davidwalsh.name\/demo\/html5250.png?preview\" class=\"post-image\" alt=\"5 HTML5 APIs You Didn\u2019t Know Existed\"\/><\/span><div class=\"preview\"><h3 itemprop=\"name\"><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/davidwalsh.name\/html5-apis\" itemprop=\"url\">5 HTML5 APIs You Didn\u2019t Know\u00a0Existed<\/a><\/h3><p>Whenever you say or learn &#8220;HTML5&#8221;, you half anticipate unique dancers and unicorns to stroll into the room to the tune of &#8220;I am Horny and I Know It.&#8221; \u00a0Are you able to blame us although? \u00a0We watched the elemental APIs stagnate for therefore lengthy {that a} primary characteristic&#8230;<\/p><\/div><\/li><li data-url=\"https:\/\/davidwalsh.name\/canvas-demos\" itemscope=\"\" itemtype=\"http:\/\/schema.org\/Article\"><span itemscope=\"\" itemtype=\"https:\/\/schema.org\/ImageObject\"><img decoding=\"async\" src=\"https:\/\/davidwalsh.name\/demo\/canvas-zen.jpg?preview\" class=\"post-image\" alt=\"9 Mind-Blowing Canvas Demos\"\/><\/span><div class=\"preview\"><h3 itemprop=\"name\"><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/davidwalsh.name\/canvas-demos\" itemprop=\"url\">9 Thoughts-Blowing Canvas\u00a0Demos<\/a><\/h3><p>The <code><canvas\/><\/code> aspect has been a revelation for the visible specialists amongst our ranks. \u00a0Canvas supplies the means for unimaginable and environment friendly animations with the added bonus of no Flash; these builders can flash their superior JavaScript abilities as a substitute. \u00a0Listed here are 9 unbelievable canvas demos that&#8230;<\/p><\/div><\/li><\/ul><\/div><div class=\"article-block post-more\"><ul class=\"post-list small-list\"><li data-url=\"https:\/\/davidwalsh.name\/chris-coyiers-favorite-pens\" itemscope=\"\" itemtype=\"http:\/\/schema.org\/Article\"><span itemscope=\"\" itemtype=\"https:\/\/schema.org\/ImageObject\"><img decoding=\"async\" src=\"https:\/\/davidwalsh.name\/demo\/codepenLogo.png?preview\" class=\"post-image\" alt=\"Chris Coyier\u2019s Favorite CodePen Demos\"\/><\/span><div class=\"preview\"><h3 itemprop=\"name\"><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/davidwalsh.name\/chris-coyiers-favorite-pens\" itemprop=\"url\">Chris Coyier\u2019s Favourite CodePen\u00a0Demos<\/a><\/h3><p>David requested me if I might be up for a visitor submit selecting out a few of my favourite Pens from CodePen. A frightening process! There are such a lot of! I managed to select a number of although which have blown me away over the previous few months. In case you&#8230;<\/p><\/div><\/li><li data-url=\"https:\/\/davidwalsh.name\/websocket\" itemscope=\"\" itemtype=\"http:\/\/schema.org\/Article\"><span itemscope=\"\" itemtype=\"https:\/\/schema.org\/ImageObject\"><img decoding=\"async\" src=\"https:\/\/davidwalsh.name\/demo\/socketio.jpg?preview\" class=\"post-image\" alt=\"WebSocket and Socket.IO\"\/><\/span><div class=\"preview\"><h3 itemprop=\"name\"><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/davidwalsh.name\/websocket\" itemprop=\"url\">WebSocket and\u00a0Socket.IO<\/a><\/h3><p><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/davidwalsh.name\/demo\/websockets.zip\"\/>&#13;&#13;My favourite internet know-how is shortly changing into the WebSocket API.  WebSocket supplies a welcomed different to the AJAX applied sciences we have been making use of over the previous few years.  This new API supplies a way to push messages from consumer to server effectively&#8230;<\/p><\/div><\/li><\/ul><\/div><\/div>\r\n<br>\r\n","protected":false},"excerpt":{"rendered":"<p>Person enter from HTML kind fields is mostly offered to JavaScript as a string. We have lived with that truth for many years however typically builders have to extract numbers from that string. There are a number of methods to get these numbers however let&#8217;s depend on common expressions to extract these numbers! To make [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":3445,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[56],"tags":[3235,443,2552,3236],"class_list":["post-3443","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software","tag-extract","tag-javascript","tag-number","tag-string"],"_links":{"self":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts\/3443","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3443"}],"version-history":[{"count":1,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts\/3443\/revisions"}],"predecessor-version":[{"id":3444,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts\/3443\/revisions\/3444"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/media\/3445"}],"wp:attachment":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3443"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3443"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<!-- This website is optimized by Airlift. Learn more: https://airlift.net. Template:. Learn more: https://airlift.net. Template: 69d9690a190636c2e0989534. Config Timestamp: 2026-04-10 21:18:02 UTC, Cached Timestamp: 2026-06-15 08:02:34 UTC -->