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 }}
/>
));
};
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);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:
\b word break flag needs to be escaped in the template literalg flag or it will only replace the first occurrenceFixed 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>`);