我目前正在撰寫一些代碼，該代碼在文本塊中獲取文本（來自 cms）并替換 CMS 中定義的所謂的“動態詞”，因此當您單擊“動態詞”時，它會給您一個警報。我現在有了這段代碼，但它不起作用，它確實使用硬編碼文本而不是來自 CMS 的動態單詞。誰能看到問題出在哪里？
有關額外資訊，請留言（例如，如果您需要知道指定的 console.log 回饋什么 :)）
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 }}
/>
));
};
編輯：作業版本：
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 }}
/>
));
};
uj5u.com熱心網友回復：
這樣您就可以創建動態正則運算式
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);uj5u.com熱心網友回復：
修復它，我將其更改為：
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 >${dynamic_word}</span>`);
uj5u.com熱心網友回復：
replace需要正則運算式或字串（完全匹配，而不是看起來像正則運算式的字串）。您將需要從模板文字創建一個正則運算式：
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)
筆記：
- 需要在模板文字中對
\b分詞標志進行轉義 - 您必須使用該
g標志，否則它只會替換第一次出現
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/466438.html
標籤：javascript 反应 代替