尝试在JavaScript中修剪字符串的一部分

Question

I am having a hard time figuring out how to trim part of a string in JavaScript. I need to remove inconsistencies since they are coming from a DB. Hoping someone can help me with this.

On my web page I have some occurences of 2 tbsp (33 g) and 2 tbsp (33g) .

I need to get everything to look like this 2 tbsp (33g) . So basically anything between the parenthesis, the whitespace needs to be removed. How can I achieve this with JS?

Here is my code: $(".servingSize").html(servingSize.replace(" ", ""));

This only removes the white space before the parenthesis. Not sure what I am doing wrong.

Answer 1

With the replace method, the only way to replace all occurrences of a match in a string is with a regex argument. The proper way to do this would be replace(/\\s/g, '') . \\s is a special argument in regexes that matches all whitespace characters.

In your case, replacing the characters only within the parentheses, you could use this regex: servingSize.replace(/\\s+(?=g)/g, '') . The (?=g) is a positive lookahead, which only selects runs of whitespace with the g character following it.

Answer 2

furkle definitely got the right answer, but I'm going to post up an alternative solution that handles cases where you don't know what units are inside the parentheses.

var regexPattern= /^([^\(]*\([^ ]*)( )([^\)]*\).*)$/;

while (regexPattern.test(servingSize)) {
    servingSize = servingSize.replace(regexPattern, "$1$3");
}

$(".servingSize").html(servingSize);

The pattern breaks down like this:

/^ - start at the beginning of the string

([^\\(]*\\([^ ]*) - capture all characters up until the opening parenthesis, the parenthesis itself, and any non-space characters that immediately follow it

( ) - capture the first space character inside the parentheses

([^\\)]*\\).*) - capture all characters up until the closing parenthesis, the parenthesis itself, and any characters that follow it

$/ - go all the way to the end of the string

By checking it with the .test() method in the while loop, it will run the loop as long as it still finds a space inside the parentheses. If it runs, it will replace the entire string with all of the characters up until the matched space and all of the characters after it.

Once the loop finds no more spaces, it quits and updates the HTML.

By doing it this way, the code works for any units that you might use:

• "2 tbsp (33 g)" ===> "2 tbsp (33g)"
• "1 hour (360 sec)" ===> "1 hour (360sec)"
• "1 ton (2000 lbs)" ===> "1 ton (2000lbs)"

Additionally, this will even handle extreme examples, such as:

• "2 tbsp ( 3 3 g )" ===> "2 tbsp (33g)"

Answer 3

Another way to do this is to replace the pattern:

servingSize.replace(/\((\s*)(\d+)(\s*)(\w+)(\s*)\)/g, '($2$4)');

Assuming the pattern is always a bracket ( followed by a number, followed by one or more letters, and another bracket ) , we can match any surrounding space and just not include those groups in the replacement. This works for any other unit as well.

If you are searching and replacing a whole HTML page, I would further lock it down to be more specific, just to be safe:

servingSize.replace(/(\d+ (?:tbsp|tsp))\s\((\s*)(\d+)(\s*)(\w+)(\s*)\)/g, '$1 ($3$5)');

(though if you are using jquery to match specific elements, the first one should be fine)

Anything between ( and ) in a regex marks a group, which can be accessed by index using $ followed by the group number (0 is the whole regex matched string, 1 starts the first group captured). In the str.Replace({regex}, s) format, the s string can contain these ${#} tokens.

Note: This will handle any spaces around the matched items:

2 tbsp ( 33 g ) => 2 tbsp (33g)

even other units instead of 'g' if needed in the future.

Answer 4

use $(".servingSize").html(servingSize.replace(" g", "g")); This will replace only the space before grams, not every space