如何在包装在字符串中的锚标记上添加onClick函数

Question

我有一个用字符串包装的锚标记。

export const linkify = (inputText) => {
let replacePattern = /(b(https?|ftp)://[-A-Z0-9+&#/%?=~_|!:,.;]*[-A-Z0-9+&#/%=~_|])/gim;
if (replacePattern.test(inputText)){
inputText=inputText.replace(replacePattern, function(url) {
return `<a href="${url}" onClick=${() => onLinkClick()}>${url}</a>`;
})
}
return inputText;
}
const onLinkClick = () => {
// do something
console.log('clicked');
}

我想在锚标签上添加一个onClick，我做了，但它不起作用

Answer 1

创建元素并编辑其属性。

const onLinkClick = () => {
// do something
console.log("clicked");
};
export const linkify = (inputText) => {
let replacePattern =
/(b(https?|ftp)://[-A-Z0-9+&#/%?=~_|!:,.;]*[-A-Z0-9+&#/%=~_|])/gim;
if (replacePattern.test(inputText)) {
inputText = inputText.replace(replacePattern, function (url) {
const a = document.createElement("a");
a.href = url;
a.innerText = url;
a.addEventListener("click", onLinkClick);
return a;
});
}
return inputText;
};