CSS和JS：如何防止“event.target.innerText”删除内部标签

Question

例如，我有一个类似的标签：

<p><a href="mailto:[email protected]">[email protected]</a></p>

当它经过这个时：

const repetitions = setInterval(x => {
      originalText = event.target.innerText;
      splitText = event.target.dataset.value.split("");
      event.target.innerText = splitText.map((character, index) => {
        
      if (index < i) {
        return event.target.dataset.value[index];
      } else {
        return codeSymbols[Math.floor(Math.random() * 26)]
      }

它删除内部

a

标签并保留它。

<p>[email protected]</p>

该事件基于观察：

const hiddenElements = document.querySelectorAll("h1, h2, p, a");
hiddenElements.forEach(ele => {
  observer.observe(ele);
})

我相信观察事件检测到

p

，然后它针对

p

中的

event.target.tagname

标记名，删除内部

a

标记。

我该如何防止这种情况发生？

Answer 1

为了防止在操作

标签内的文本时删除内部标签的内容，您可以在修改之前检查innerText是否属于该标签。方法如下：

const repetitions = setInterval(x => {
// Check if the event target is an <a> tag or not
if (event.target.tagName.toLowerCase() === 'a') {
    originalText = event.target.innerText;
    splitText = event.target.dataset.value.split("");
    event.target.innerText = splitText.map((character, index) => {
        if (index < i) {
            return event.target.dataset.value[index];
        } else {
            return codeSymbols[Math.floor(Math.random() * 26)];
        }
    }).join(""); // Join the array back into a string
}

}, 间隔时间);

此修改确保仅修改标签的文本内容，

等其他标签不受影响。