Trying to remove some characters from a string via JavaScript

I have a script where it parses a SVG image. I’m trying to parse a attribute named “opacity” and remove the period and zero than add a zero if it equals “0.8” for a example. The number 8 could be any number lower than 10 though. So basically if it starts with “0.” remove it and add a “0” after the “8”.

So let’s say the opacity value is “0.8”, I would like it to remove the “0.” and add “0” after the “8”. Which would make it “80”.

And when the opacity value is “1.0” remove the “.0” and add two “0”s after the 1. Which would make it “100”

Here is 2 examples of the elements of the SVG.

<polyline points="425,311 425,312 425,312 424,314 424,314 424,317 424,317 424,322 424,322 424,326 424,326 424,328 424,328 424,329 424,331 423,332 423,333 423,334 423,335 423,336 423,338 423,341 423,342 423,344 423,348 423,350 423,353 423,355 423,357 423,358 423,359 423,360 423,363 423,364 423,365 424,367 424,370 424,372 424,374 425,378 426,383 426,387 426,389 427,393 428,397 428,401 428,403 428,409 429,414 430,419 431,422 431,427 432,431 432,434 432,435 433,437 433,438 433,439 433,440 433,441 433,442 433,443 433,444 433,446 433,448 433,449 433,450 433,451 433,453 433,454 433,455 433,456 433,457 433,458 432,459 432,461 432,462 431,463 430,464 429,466 428,467 428,469 428,471 427,471 427,472 427,473 426,474 425,475 425,476 424,479 424,481 424,486 424,489 424,491 424,492 424,493 424,494 424,495" style="fill: none; stroke: #963cd3; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; stroke-antialiasing: false; stroke-antialias: 0; opacity: 0.8"/>

<polyline points="74,189 74,190 74,190 74,191 75,191 75,192 76,192 76,193 77,193 77,194 78,194 78,195 79,195 79,196 80,196 80,197 81,197 81,198 82,198 82,199 83,199 83,200 84,201 85,201 85,202 86,202 86,203 87,204 88,205 89,205 89,206 90,206 91,206 91,207 92,207 92,208 93,208 93,209 94,209 95,209 95,210 96,210 96,211 97,211 98,212 99,212 100,213 101,214 102,214 103,214 103,215 104,215 105,215 105,216 106,216 107,216 108,216 108,217 109,217 110,217 111,217 112,218 113,218 114,218 115,218 116,218 117,218 118,218 118,217" style="fill: none; stroke: #000000; stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; stroke-antialiasing: false; stroke-antialias: 0; opacity: 1.0"/>

As you can see one of the element’s “opacity” attribute’s value is “1.0” and the other is “0.8”.

So when my script logs the values into console. I need them to print like this

For the first element it would log “80”

and for the second it will log “100”.

I’ve tried doing this but figuring it would work but nope.

if (opacity === "1.0")
{
opacity.replace(".0", "00")
$.post("/draw.php?ing=_index", {
            l: ((JSON.stringify(line.getAttribute('points').split(' ').map(pair => pair.split(',').map(Number))))),
            w: (size),
            c: (color),
            o: ("100"),
            f: ("1"),
            _: ("true")
 })
}
else
{
opacity.replace("0.", "") + "0"
$.post("/draw.php?ing=_index", {
            l: ((JSON.stringify(line.getAttribute('points').split(' ').map(pair => pair.split(',').map(Number))))),
            w: (size),
            c: (color),
            o: ("100"),
            f: ("1"),
            _: ("true")
 })
console.log(opacity)
}

Answer

Javascript’s replace function returns a new string and does not edit the string in place.

So your code should be doing this

opacity = opacity.replace(".0", "00");

Another solution could be to take advantage of javascript’s weak typing system and do the following.

opacity = opacity * 100;
$.post("/draw.php?ing=_index", {
            l: ((JSON.stringify(line.getAttribute('points').split(' ').map(pair => pair.split(',').map(Number))))),
            w: (size),
            c: (color),
            o: ("100"),
            f: ("1"),
            _: ("true")
 });
console.log(opacity);

This will then work regardless of whether the opacity is a number like 0.8 or a string like '0.8'

Advertisement

Answer