在反應中用 html 標簽替換部分字符串

Question

我有這個字符串“接受條款和條件”，根據設計，我需要用跨度標簽替換該字符串的一部分，也就是說，“條款”和“條件”應該用跨度包裝，如<span>terms</span>和<span>conditions</span> 。 為了找到解決方案，我找到了如何使用替換為 React 中字符串的特定部分添加顏色？ 但它沒有按預期工作。 所以，我有這樣使用的 FormInput 組件：

<FormInput
          type="checkbox"
          value={formik.values.terms}
          name="terms"
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          label={`Accept terms and conditions`}
          checkbox={true}
        >
          {formik.touched.terms && formik.errors.terms ? (
            <ErrorMessage termsCheckbox={true}>
              {formik.errors.terms}
            </ErrorMessage>
          ) : null}
        </FormInput>

如您所見，我正在傳遞 label={ Accept terms and conditions } 並且我需要確保“條款”和“條件”這兩個詞是紅色的

Answer 1

如果我正確理解您的問題，可以遵循以下方法。
您可以為此目的使用正則表達式。 在您的字符串中找到匹配項，並使用來自各個捕獲組的結果將它們替換為所需的模式。

 var str = 'accept terms and conditions' var regex = /(terms)|(conditions)/g var res = str.replace(regex,function(match,p1,p2){ if(p1) return `<span>${p1}</span>` else if (p2) return `<span>${p2}</span>` }) console.log(res)