Regex that detects if the key has a missing character

const placeholders = {
    "Luke": "{{candidate_first_name}}",
    "xxx@gmail.com": "{{candidate_email}}",
}

const text = <div>Hi&nbsp; Luke ,</div><div><strong>Email: </strong>xxx@gmail.com</div>

export default function removeTextPlaceholders(
  text: string,
  placeholders: any
) {
  try {
    for (const [key, value] of Object.entries(placeholders)) {
      if (value) {
        const regex = new RegExp(`^${key}(?:\\s*|.{0,1})$`, 'g');

        // Check if the key is a complete match before replacing
        if (!text.includes(key)) {
          text = text.replace(regex, '');
        }
      }
    }

    return text;
  } catch (e) {
    return text;
  }
}



function cleanPlaceholders(input: any) {
                // Regular expression to match any incomplete placeholders
                const regex = /{{\w+}(?!})|(?<!{){\w+}}/g;

                // Replace incomplete placeholders with an empty string
                return input.replace(regex, '');
              }

const handleBodyChange = (e: any) => {
                if (previewOpen) {
                  const value = removeTextPlaceholder(e);
                  setPreviewBody(textToplacholders(value));
                  setFieldValue('body', textToplacholders(value));
                } else {
                  const value = cleanPlaceholders(e);
                  setPreviewBody(value);
                  setFieldValue('body', value);
                }
              };

this is the return ui:

{!previewOpen ? (
    <AtsEmailBody
     value={values.body}
     onChange={(e: any) => handleBodyChange(e)}
    />) :
    <AtsEmailBody
     value={placholders(previewBody)}
     onChange={(e: any) => handleBodyChange(e)}
    />)
}

The thing is, I’m creating a text editor that changes the placeholder to its value and vise-versa.

For example,

the value on the editor is:

Hi  {{candidate_first_name}} ,
Email: {{candidate_email}}

if the {{}} is not complete format, it automatically remove all of its word. So for example, if i delete the } in {{candidate_first_name}} and it became {{candidate_first_name}, the function cleanPlaceholders will remove the whole {{candidate_first_name}}. I already have a function with that.

If the previewOpen is true, the placeholder will be converted to its value.

Hi  Luke ,
Email: xxx@gmail.com

Currently, my issue now is if I delete a char of the placeholder value, it should remove all of the words.

For example, if I removed the e and it will became Luk, Luke whole word should be automatically remove since it is a placeholder.

same with if i remove m in xxx@gmail.com, it should remove the whole word.

for (const [key, value] of Object.entries(placeholders)) {
      if (value) {
        const regex = new RegExp(`${key}(?:\\s*|.{0,1})`, 'g');
     text = text.replace(regex, '');
    }
    }

this is my current condition, but this only detect the whole value. and it removed all of the text content since this regex matches the exact key value.

You need to sign in to view this answers