Kode ini akan mengambil str dan menempatkan setiap kata dalam <span>. Saya ingin menambahkan beberapa fungsi, jadi beberapa kata akan disorot, tetapi tidak tahu cara meneruskan $& (yang merupakan kata) ke fungsi highLight. Saat ini saya telah menulis {$&} yang tidak berfungsi.

str = "Adam Sandler"
const highLight = (param) => {
 conosle.log(param)
}

const wrapWordsInSpan = (str) => {
   const addedSpanToText = str.replace(
     /\w+/g,
     `<span id="text-container" style="color: ${highLight(`{$&}`)}"}>$&</span>`
   );
1
Exchange_programming 12 Mei 2021, 15:42

1 menjawab

Jawaban Terbaik

Anda benar-benar dekat, tetapi Anda harus meneruskan fungsi sebagai argumen kedua ke replace jika Anda ingin menggunakan nilai itu secara dinamis (misalnya, untuk memanggil highlight) , seperti ini:

const wrapWordsInSpan = (str) => {
    const addedSpanToText = str.replace(
       /\w+/g,
       match => `<span id="text-container" style="color: ${highLight(match)}"}>${match}</span>`
    );
    return addedSpanToText;
};

Bagian match => `<span id="text-container" style="color: ${highLight(match)}"}>${match}</span>` adalah fungsinya. Itu dipanggil dengan teks yang cocok sebagai argumen (setara dengan token $& dalam string), yang saya sebut match di atas (nilai grup tangkap adalah argumen berikutnya, detail di MDN). Apa yang dikembalikannya digunakan sebagai pengganti:

const wrapWordsInSpan = (str) => {
    const addedSpanToText = str.replace(
       /\w+/g,
       match => `<span id="text-container" style="color: ${highLight(match)}"}>${match}</span>`
    );
    return addedSpanToText;
};

const highLight = (param) => {
    return param === "Adam" ? "green" : "black";
};

const str = "Adam Sandler"

console.log(wrapWordsInSpan(str));
3
T.J. Crowder 12 Mei 2021, 12:46