スパンタグ内の動的非感知文字列をラップする

Question

スパンタグに動的非感知文字列をラップしようとしていますが、$ 1が出力されています。私を助けてください。

 function focusSearchValue(data, value){ 
 
     \t \t var regEx = new RegExp((value), "ig"); 
 
    \t \t \t data = data.replace(regEx, "<span class=''>$1</span>"); 
 
       console.log(data); 
 
     } 
 
    
 
    focusSearchValue('SharePoint 2016, Team Collaboration Software Tools', 'sharepoint');

Answer 1

$1は、文字列置換パターンから参照できることを、value周りの括弧は、パターンの一部ではなく、したがって、あなたの正規表現にはキャプチャグループが定義されていません。そのため、置換結果としてリテラル文字列として$1が渡されます。あなたがする必要があります正規表現エンジンに変数を渡すので

function focusSearchValue(data, value){ 
 
     var regEx = new RegExp(value.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), "ig"); 
 
     return data.replace(regEx, "<span class=''>$&</span>"); 
 
} 
 

 
console.log(focusSearchValue('SharePoint 2016, Team Collaboration Software Tools', 'sharepoint'));

：

あなたは（String#replace "Specifying a string as a parameter" sectionを参照）、および文字列を返し、マッチ全体を参照するために$&を使用する必要がありますリテラル文字列として解析されるので、特別な正規表現メタキャラクタとして機能する可能性のあるすべての特殊文字をエスケープすることをお勧めします。したがって、追加されたエスケープ文字は.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')です。

Answer 2

私はreplace（詳細：function as argument、regex escaping search terms）：の第2引数としての関数を渡して、この構文はもう少し直感的に見つける

const reEscape = searchTerm => (
 
    searchTerm.replace(/[-{}()[/*+?.^$|\]\\]/g, "\\$&") 
 
); 
 

 
const addSpan = $1 => `<span>${$1}</span>`; 
 

 
const focusSearchValue = (data, value) => { 
 
    const regex = new RegExp(`${reEscape(value)}`, 'ig'); 
 
    return data.replace(regex, addSpan); 
 
}; 
 

 
console.log(focusSearchValue('SharePoint 2016, Team Collaboration Software Tools', 'sharepoint'));