When using the parseFloat function with a regular expression input, it results

My goal is to adjust float values within a string by a specific amount. Here is my current approach:

var string = '<path d="M219.6,-71.4C249,19.1,212.7,130.9,135.7,186.8C58.8,242.7,-58.8,242.7,-135.7,186.8C-212.7,130.9,-249,19.1,-219.6,-71.4C-190.2,-161.8,-95.1,-230.9,0,-230.9C95.1,-230.9,190.2,-161.8,219.6,-71.4Z" />';
var regex = /[+-]?([0-9]*[.])?[0-9]+/g;
console.log(string.replace(regex, parseFloat("$&") + 300));

Why does it replace parseFloat("$&") with NaN? What is the correct way to achieve this?

javascriptregexparameters

Answer №1

Essentially, your code is the same as

var temp = parseFloat("$&") + 300;
document.body.innerText = string.replace(regex, temp);

This is because function arguments are assessed prior to calling the function. The use of "$&" only holds significance within the replacement string provided to replace(); it does not possess any special meaning for parseFloat(), nor can replace() access and modify the parameter inside the parseFloat() call.

If you wish to invoke a function to determine the replacement, you must pass a reference to the function to the replace() function, rather than an expression containing the function call. 

var string = '<path d="M219.6,-71.4C249,19.1,212.7,130.9,135.7,186.8C58.8,242.7,-58.8,242.7,-135.7,186.8C-212.7,130.9,-249,19.1,-219.6,-71.4C-190.2,-161.8,-95.1,-230.9,0,-230.9C95.1,-230.9,190.2,-161.8,219.6,-71.4Z" />';
var regex = /[+-]?([0-9]*[.])?[0-9]+/g;
var newString = string.replace(regex, match => parseFloat(match) + 300);
console.log(newString)

Answer №2

Take a look at the parseFloat explanation

A floating point number obtained from the provided value. If it is not possible to convert the value into a number, NaN will be returned.

It is evident that you are dealing with a string that cannot be transformed into a Number.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing JavaScript for manipulating arrays and displaying images

After asking this question previously without a satisfactory solution, I am hoping to provide better clarification. Imagine having an array with 3 items and it lands on 0 - a code is set up to display this in a div. Now, I want the image to be shown righ ...

javascripthtmlcss

React - updating key prop does not trigger re-render of child component

I have implemented react-infinite-scroll to display a continuous feed of data. My goal is to refresh the data feed whenever the user makes any changes to their settings. To achieve this, I am utilizing a key prop for the InfiniteScroll component. The conc ...

javascriptreactjsinfinite-scrollreact-props

Ways to verify the timeframe between two specific dates

Having two distinctive arrays: accomodation: [ { id: 1, name: "Senator Hotel Fnideq", address: "Route de Ceuta, 93100 Fnidek, Morocco", checkin: "September 1", fullCheckinDate: "2021-09-01", ...

javascriptarraysvue.jsobjectdayjs

Can the value in a JavaScript object be updated dynamically when a button is clicked?

In my JavaScript code, there is an object named annualPlan. Whenever a user submits the HTML form for a specific month, I aim to update the value in the object for that particular month accordingly. For instance, if someone submits August 21 and 200, I w ...

javascripthtmlcss

Harnessing the power of the bluebird promise library

Within myPeople function, there is a promise function being called as shown below: var myPeople = function(){ var go; return new Promise (function(resolve){ User .getPeople() .then(function(allPeople){ ...

javascriptnode.jspromisebluebird

Instructions on invoking a function from one controller within another controller

Is it possible to invoke a function from one controller in another controller? I attempted the following but encountered failure: <div ng-app="MyApp"> <div ng-controller="Ctrl1"> <button ng-click="func1()">func1</button> ...

javascriptangularjsangularjs-controllerangularjs-1.6

Exploring the seamless integration of Next.js, TypeScript, and useContext across

Revision: I realized that I had forgotten to include the following line of code in my Header.tsx component: import Link from 'next/link'; After rectifying this oversight, everything started functioning properly. I am currently struggling with ...

javascriptreactjstypescriptnext.js

JavaScript function not being executed after AJAX response in HTML

There seems to be a problem with my jQuery code. After receiving an html response from an ajax call and prepending it to a div, a div within that received html is not triggering a function in my external javascript file. In the index.php file, I have incl ...

phpjavascriptajaxjquery

Refresh Layers in Openlayers with LayerRedraw(), Rotate Features, and Manipulate Linestring Coordinates

TLDR: I am facing difficulties with my OpenLayers map. Specifically, I want to remove and add a layer called 'track', or find a way to plot a triangle based on one set of coordinates and a heading (see below). In my OpenLayers map, there is an i ...

javascriptjqueryjsonextjsopenlayers

The Bootstrap slide function encounters issues within the AJAX success callback

Here's the code snippet with a 'slide' event inside an AJAX success call. success: function(data) { $('#my_container').html(data); // Successfully loading #mycarousel into #my_container $('#mycarousel').bind( ...

javascriptjqueryajaxtwitter-bootstrapbootstrap-carousel

Determine the presence of a JSON Value/Array in a web application using JavaScript and visualize the information in a dynamic

Utilizing the Ticketmaster API has provided me with a sample dataset from their platform, Data 1 - Including information on "presales." "sales": { "public": { "startDateTime": "2019-11 ...

javascriptjson

Implementing AJAX functionality to dynamically show a message on a webpage following an HTTP POST request

After submitting the form, I want to remain on the current page and show a message indicating whether the submission was successful or not. The HTTP POST request is processed like this: app.post('/insertdb', function(request, response) { // in ...

javascriptajaxexpress

Having trouble getting JQuery Ajax POST to work in Codeigniter

Encountering an issue with jQuery AJAX post in CodeIgniter, where clicking the submit button triggers an error. Below is the code snippet: home.js form.on('submit', function(e){ e.preventDefault(); var fields = {}; form.find(' ...

javascriptphpjqueryajaxcodeigniter

Can you examine words for similarities, and should we also search for instances of plurals and -ing

I need to compare two lists of words: LIST1 and LIST2. My goal is to identify duplicates, including the plural form and the "-ing" form as well. For example: If LIST1 contains the word "account" and LIST2 contains the words "accounts, accounting", the com ...

phpmysqlregexsearch

Connecting a text input in a nested component to the data passed down from its parent component in VueJS

My VueJS setup involves a child component sending data to a parent component, which then tries to route the data to a sibling of the child to create new components. I'm using a dictionary to group the data and push it into an array. The array is then ...

javascriptvue.jsvuejs2

I'm looking for a creative JavaScript prototype example that can help illustrate the concept of prototypes. Can someone share an interesting sample with me

I've been trying to wrap my head around prototypes, but I just can't seem to grasp their purpose and function. Is there anyone who can provide a straightforward example (such as a collegeStudent object) that will clarify the fundamentals of proto ...

javascriptjqueryprototype

Creating a tree structure in Node.js using JSON data while preventing duplicates: A step-by-step guide

My MongoDB has some JSON data that looks like this: [ { "_id": { "$oid": "1" }, "name": "A Inc", "children": [ {"$oid": "2"},{"$oid": & ...

javascriptjsonalgorithmdata-structures

Troubleshooting: Issue with Passing Variable from Controller to Partial in Rails with AJAX

I am facing an issue with passing a variable from my controller to a partial asynchronously. My goal is to render a form on my view after the user selects an option from a drop-down menu. However, I keep encountering the following error: undefined local v ...

javascriptruby-on-railsrubyajax

What determines why the input value is restricted to being of type string?

In my ReactJS component, I am struggling to set the state value as an integer using setState. This is causing issues with the radio button not being checked. constructor(props) { super(props); this.state = { frequency: 1, } handleSelectChange(eve ...

javascriptreactjs

Accessing data stored in XML or JSON files from a local server

I am currently working on loading a list of coordinates for a Google map from either an XML or JSON file, both of which are hosted in the same directory on my local test server. So far, I have used a hard-coded JSON object to load map coordinates for tes ...

javascriptjsonxmlgoogle-maps-api-3