如何避免在以下腳本中使用兩次替換（僅使用一個正則表達式）？

Question

我需要從編輯的字符串：

rgb(250, 0, 0) 10px 10px 50px 0px

到：

rgba(250, 0, 0, 1) 10px 10px 50px 0px

假設輸入值總是正確的，我需要添加的1

alpha通道

我創建的作品的後續腳本，但我想知道雙替換。

我想知道如果您執行更好的方法，也許只使用一個regex並避免使用兩次或更好的替代replace。

 var _convertBoxShadowToTgba = function (boxShadow) { 
 
      return boxShadow.replace(/rgb/i, 'rgba').replace(/\)/i, ', 1)'); 
 
     }; 
 
     var original = "rgb(250, 0, 0) 10px 10px 50px 0px"; 
 
     var final = _convertBoxShadowToTgba(original); 
 
     console.log('original', original); 
 
     console.log('final', final);

Answer 1

正則表達式：

rgb(.*?\d)\) 

說明：

rgb   # Match literal `rgb` 
    (  # Start of capturing group (1) 
     .*? # Match every thing lazily 
     \d # Up to a digit 
    )  # End of capturing group (1) 
\)   # That is followed by a closing bracket 

替換字符串：

rgba$1, 1) 

$1是背面參照第一捕獲組

JS代碼：

original.replace(/rgb(.*?\d)\)/i, 'rgba$1, 1)') 

Live demo

Answer 2

使用基團，如下所示：

/rgb(.*)\)/ 

這將組rgb和最後一個參數之間的所有內容附着點。 然後，您可以重複使用組的替換表達式中：

.replace(/rgb(.*)\)/, 'rgba$1, 1') 

測試：

a = 'rgb(250, 0, 0) 10px 10px 50px 0px' 

a.replace(/rgb(.*)\)/i, 'rgba$1, 1)') 
>"rgba(250, 0, 0, 1) 10px 10px 50px 0px" 

它的工作方式如下：

括號之間的表達式稱爲組，可以在替換表達式中使用$變量重用它。

例如：

a = 'Hello, foo!' 
a.replace(/(Hello)(.*)(foo)/, '$3$2$1') 
> foo, Hello! 

在這個例子中，組是：

$1 : (Hello) 
$2 : (.*) 
$3 : (foo) 

您可以切換左右他們，取代他們，等等，你的願望。

Further reading on regex grouping

Answer 3

您還可以傳遞給替代方法的功能。 像這樣：

var _convertBoxShadowToTgba = function (boxShadow) { 
     return boxShadow.replace(/rgb|\)/g, function($0) { 
       if ($0 == 'rgb') { return 'rgba';} 
       if($0 == ')') {return ', 1)';} 
      }); 
}; 
var original = "rgb(250, 0, 0) 10px 10px 50px 0px"; 
var final = _convertBoxShadowToTgba(original); 
console.log('original', original); 
console.log('final', final);