Question

 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].nextSibling);
   }
  }

有人给了我答案，因为我有这个代码虽然它没有正常工作。虽然我现在有问题，但如果我的文字是这样的话：

This is just a test so click here www.youtube.com which then becomes

 <a href="www.youtube.com%20which%20then%20becomes">www.youtube.com%20which%20then%20becomes</a>

没有事件保留第一行文本，我只需要在保留周围文本的同时解析URL。

需要输出来保存实际的周围文本，但是将文本内部的网址解析为html锚标记<a>，这样它们就可以点击并实际跟进到一个真实的网站而不会有不一致其中的文字来自我的用户所写的内容。谢谢

更新我已经接近完成这项工作 - 但是我遇到问题，字符串中的第一个文字是Undefined我一直在调试这个并且似乎无法弄清楚为什么会发生这种情况。这是代码

  var a = document.querySelectorAll('.post');
  var b = a[0].childNodes;
  var textArray;
  var ahref;
  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 newHTML;
    textArray = b[i].textContent.split(" ");
    for (var j = 0; j < textArray.length; j++) {
        if (textArray[j] !== "" && validURL(textArray[j])) {
            ahref = document.createElement('a');
            ahref.href = (/^(http:\/\/|https:\/\/)/).test(textArray[j]) ? textArray[j] : "http://" + textArray[j];
            ahref.innerText = textArray[j];
            ahref.className = "easyURLparse";
            textArray[j] = ahref;
        }
        newHTML+= textArray[j].outerHTML ? textArray[j].outerHTML + " " : textArray[j] + " ";

    }
    var div = document.createElement('div');
    div.innerHTML = newHTML;
    newHTML = "";
    b[i].parentNode.insertBefore(div, b[i]);
    b[i].parentNode.removeChild(b[i].nextSibling);
}
  }

  function validURL(str) {
var pattern = new RegExp("([a-zA-Z0-9]+://)?([a-zA-Z0-9_]+:[a-zA-Z0-9_]+@)?([a-zA-Z0-9.-]+\\.[A-Za-z]{2,4})(:[0-9]+)?(/.*)?");
if (!pattern.test(str)) {
    return false;
} else {
    return true;
}
   }

Testing Code

只需要找出未定义的以及为什么要添加它

Answer 1

这个正则表达式将完成这项工作

exp = /href="(\b(https?|ftp|file):\/\/[\-A-Z0-9+&@#\/%?=~_|!:,.;]*[\-A-Z0-9+&@#\/%=~_|])"/ig;

Answer 2

 var a = document.querySelectorAll('.post');
 var b = a[0].childNodes;
 var textArray;
 var ahref;
   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 newHTML;
       if (validURL(b[i].textContent)) {
        textArray = b[i].textContent.split(" ");
        for (var j = 0; j < textArray.length; j++) {
            if (textArray[j] !== undefined && textArray[j] !== "" && validURL(textArray[j]) && textArray[j] !== null) {
                ahref = document.createElement('a');
                ahref.href = (/^(http:\/\/|https:\/\/)/).test(textArray[j]) ? textArray[j] : "http://" + textArray[j];
                ahref.innerText = textArray[j];
                ahref.className = "easyURLparse";
                textArray[j] = ahref;
            }
            newHTML += textArray[j].outerHTML ? textArray[j].outerHTML + " " : textArray[j] + " ";
        }
        var div = document.createElement('div');
        div.innerHTML = newHTML;
        div.className = "easyDiv";
        b[i].parentNode.insertBefore(div, b[i]);
        b[i].parentNode.removeChild(b[i].nextSibling);
    }
    newHTML = "";
}
 }

function validURL(str) {
var pattern = new RegExp("([a-zA-Z0-9]+://)?([a-zA-Z0-9_]+:[a-zA-Z0-9_]+@)?([a-zA-Z0-9.-]+\\.[A-Za-z]{2,4})(:[0-9]+)?(/.*)?");
if (!pattern.test(str)) {
    return false;
} else {
    return true;
}
 }

通过获取textNodes并将它们拆分成数组，我可以将url更改为html元素。然后使用数组元素查看是否存在outerHTML，然后将其放入新字符串中，并使用可操作的链接替换该textNode。

<强> Working example

用带正则表达式的锚替换带有url的文本

2 个答案: