replace part of string with html tags in react

Question

I have this string "Accept terms and conditions" and by design I need to replace part of that string with span tags, that is, "terms" and "conditions" should be wrapped with span like <span>terms</span> and <span>conditions</span>. To find solution I have found How to add color to a specific part of a string in React using replace? but it does not work as expected. So, I have FormInput component which is used like this:

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

As you can see I am passing label={Accept terms and conditions} and I need to ensure that the words 'terms' and 'conditions' are in red color

Please post your code so we can get a better idea of how to help you. — Dylan Bozarth
– Dylan Bozarth, Commented Jan 20, 2021 at 18:15
@imstupidpleasehelp, done, I have added react component I hope it is clearer now if not pls let me know — Mir
– Mir, Commented Jan 20, 2021 at 18:21

AL-zami · Accepted Answer · 2021-01-20 19:04:44Z

0

If I understand your question correctly, the following approach can be followed.
you can use regular expression for this purpose. Find the match in your string and replace them with desired pattern using the result from respective capturing groups.

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)

edited Jan 20, 2021 at 19:04

answered Jan 20, 2021 at 18:45

AL-zami

9,20417 gold badges79 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

replace part of string with html tags in react

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related