尝试通过 JavaScript 从字符串中删除一些字符

Question

我有一个脚本来解析 SVG 图像。 我正在尝试解析一个名为“opacity”的属性并删除句点和零，而不是添加一个零，如果它等于“0.8”，例如。 不过，数字 8 可以是任何小于 10 的数字。 所以基本上如果它以“0”开头。 删除它并在“8”后添加“0”。

所以假设不透明度值为“0.8”，我希望它删除“0”。 并在“8”后添加“0”。 这将使它成为“80”。

当不透明度值为“1.0”时，删除“.0”并在 1 后添加两个“0”。这将使其成为“100”

这是 SVG 元素的 2 个示例。

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

如您所见，元素的“opacity”属性值之一是“1.0”，另一个是“0.8”。

因此，当我的脚本将值记录到控制台时。 我需要他们像这样打印

对于第一个元素，它将记录“80”

第二，它将记录“100”。

我试过这样做，但认为它会起作用，但不行。

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 1

Javascript 的replace函数返回一个新字符串并且不会就地编辑该字符串。

所以你的代码应该这样做

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

另一种解决方案可能是利用 javascript 的弱类型系统并执行以下操作。

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

无论opacity是像0.8这样的数字还是像'0.8'这样的字符串，这都将起作用

Answer 2

您似乎对 String.replace 的工作方式有误解。 此外，行尾的分号没有区别。

opacity.replace()不会修改字符串。 相反，它返回替换了字符的字符串。

尝试将opacity =添加到语句的开头。

这样做的另一种方法，即（IMO）更具可读性，将您的字符串解析为浮点数（可以具有小数部分的数字），然后将其乘以 100 以将其转换为百分比。

opacity = 100 * parseFloat(opacity);

或者如果不透明度真的需要是一个字符串

opacity = (100 * parseFloat(opacity)).toString();

Answer 3

可以使用元素style属性更改内联 CSS 属性：

 var el = document.getElementsByTagName('polyline')[0]; if (el.style.opacity <= 1) el.style.opacity *= 100; console.log(el);

 <polyline style="opacity: 0.8;"/>