Text replacing in ReactJS

Question

I am currently working on some code that gets the text (from the cms) in a textblock and replaces so called 'dynamic words' that are defined in the CMS, so when you click a 'dynamic word' it gives you an alert. I now have this code but it doesn't work and it did work with hardcoded text instead of dynamic words from the CMS. Can anyone see where the problem is here?

For extra info leave an message ( For example if you need to know what an specified console.log gives back :) )

import { useEffect } from 'react';
import { TextBlock } from './ArticleBodyText.styles';

export const ArticleBodyText = ({ item, dynamic_words }) => {
  useEffect(() => {
    const el = document.getElementById('this-text');
    const text = el.innerHTML;
    dynamic_words.map(word => {
      const dynamic_word = word.word?.[0].text;
      const newText = text.replace(
        `/\b${dynamic_word}\b/g`,
        `<span class='dynamic-word'>${dynamic_word}</span>`
      );
      el.innerHTML = newText;
      const spans = el.querySelectorAll('.dynamic-word');
      for (let i = 0; i < spans.length; i += 1) {
        spans[i].addEventListener(
          'click',
          function () {
            if (this.innerHTML === dynamic_word) {
              alert('You clicked a dynamic word!');
            }
          },
          false
        );
      }
    });
  });

  return item?.primary?.body_text.map(bodytext => (
    <TextBlock
      id="this-text"
      key={bodytext.text}
      dangerouslySetInnerHTML={{ __html: bodytext.text }}
    />
  ));
};

EDIT: Working version:

import { useEffect } from 'react';
import { TextBlock } from './ArticleBodyText.styles';

export const ArticleBodyText = ({ item, dynamic_words }) => {
  useEffect(() => {
    const el = document.getElementById('this-text');
    const text = el.innerHTML;
    const newText = text.replace(/\bte\b/g, "<span class='dynamic-word'>te</span>");
    el.innerHTML = newText;
    const spans = el.querySelectorAll('.dynamic-word');
    for (let i = 0; i < spans.length; i += 1) {
      spans[i].addEventListener(
        'click',
        function () {
          if (this.innerHTML === 'te') {
            alert('Je hebt op een dynamic word geklikt!');
          }
        },
        false
      );
    }
  });

  return item?.primary?.body_text.map(bodytext => (
    <TextBlock
      id="this-text"
      key={bodytext.text}
      dangerouslySetInnerHTML={{ __html: bodytext.text }}
    />
  ));
};

It would be helpful if you could provide the prior 'working' version and also describe in what way it is no longer working. You seem to have some nested objects and arrays there we don't understand the structure of, plus a lot of optional chaining which is going to result in 'undefined' values when absent. — Dave Meehan
– Dave Meehan, Commented Apr 28, 2022 at 7:43
I found that the problem is here: const newText = text.replace(/\bte\b/g, but how can i replace 'te' with the dynamic_word const? — Erik
– Erik, Commented Apr 28, 2022 at 7:52
You want to replace "te" inside this span tag with dynamic_word const "<span class='dynamic-word'>te</span>" ? — Inder
– Inder, Commented Apr 28, 2022 at 8:10
No, I want to replace the 'te' in the replace regex with the dynamic_word const — Erik
– Erik, Commented Apr 28, 2022 at 8:12
const word = "something"; const newText = /\b${word}\b/g ; This newText has to be inside template literals — Inder
– Inder, Commented Apr 28, 2022 at 8:14

Inder · Accepted Answer · 2022-04-28 08:29:44Z

1

This way you can create dynamic regex

const word = "something";
const sentence = "This is something";

let first = "\\b",
  second = "\\b";

const regex = new RegExp(first + word + second, "g");

const newSent = sentence.replace(regex, "Inder");
console.log(newSent);

answered Apr 28, 2022 at 8:29

Inder

2,1542 gold badges10 silver badges22 bronze badges

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

Comments

Dave Meehan · Accepted Answer · 2022-04-28 08:39:22Z

1

replace expects a regular expression or a string (exact match, not a string that looks like a regular expression). You will need to create a regex from a template literal:

const oldText = "the sly brown fox is sly"
const dynamic_word = "sly"
const newText = oldText.replaceAll(
  new RegExp(`\\b${dynamic_word}\\b`, 'g'),
  `<span class='dynamic-word'>${dynamic_word}</span>`
);

console.log(newText)

Note:

The \b word break flag needs to be escaped in the template literal
You must use the g flag or it will only replace the first occurrence

answered Apr 28, 2022 at 8:39

Dave Meehan

3,2231 gold badge19 silver badges29 bronze badges

Comments

Erik · Accepted Answer · 2022-04-28 08:39:09Z

0

Fixed it, I changed it to:

const dynamic_word = word.word?.[0].text;
      const first = '\\b';
      const second = '\\b';
      const regex = new RegExp(first + dynamic_word + second, 'g');
      const newText = text.replace(regex, `<span class="dynamic-word">${dynamic_word}</span>`);

edited Apr 28, 2022 at 8:39

answered Apr 28, 2022 at 8:33

Erik

351 silver badge6 bronze badges

Collectives™ on Stack Overflow

Text replacing in ReactJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related