将子节点文本节点替换为新的 HTML(url 替换器)

Question

我需要一些小而紧凑的东西，所以我一直在这样做 试验，我有一些工作正常的东西，只是出于某种原因它实际上并没有附加新的 html...

 var a = document.querySelectorAll('.post .content div');
 var b = a[7].childNodes;
 for(i=0;i<b.length;i++){
  var exp = /(b(https?|ftp|file)://[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/ig;
   if(b[i].nodeType === 3){
     var ahref = document.createElement('a');
         ahref.className="easyBBurlFetch";
         ahref.href=b[i].nodeValue.replace(exp,'$1');
         ahref.innerText=b[i].nodeValue.replace(exp,'$1');
     b[i].parentNode.insertBefore(ahref,b[i]);
     b[i].parentNode.removeChild(b[i]);
    }
  }

测试小提琴

Answer 1

尝试将最后一行更改为b[i].parentNode.removeChild(b[i].nextSibling);，因为对于当前行，您将删除在上一步中添加的相同元素。原因是 childNode 返回实时集合，当您将元素添加到同一父节点时，您的元素 @ b[i] 不是文本节点，而是您刚刚添加的锚点。并且在处理实时集合缓存时，预先确定长度：

 var a = document.querySelectorAll('.post .content div');
 var b = a[0].childNodes;
 for(i=0, l=b.length;i<l;i++){ //Cache the length here in variable l
  var exp = /(b(https?|ftp|file)://[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/ig;
   if(b[i].nodeType === 3){
      ...........
     b[i].parentNode.insertBefore(ahref,b[i]);
     b[i].parentNode.removeChild(b[i].nextSibling); //remove the next element to the added element
     //Or
     //b[i].parentNode.removeChild(b[i+1]);
    }
  }