javascript：阅读纯html字符串和使用DOMparser更改链接路径

问题描述：

在我的角应用程序使用所见即所得之一我可以插入链接没有协议。这很不好：javascript：阅读纯html字符串和使用DOMparser更改链接路径

我需要解析字符串和更改所有链接的

，我尝试这样做（如果大公没有协议http://..）：

var content = '<p>7</p><p>77</p><p><br></p><p><a href="http://example.com" rel="nofollow">http://example.com</a></p><p><br></p><p><a href="example.com" target="_blank">example.com</a></p><p><br></p><p><a href="ftp://localhost">ftp://localhost</a></p><p><br></p><p><a href="localhost">localhost</a><br></p>'; 

var addProtocolToLinks = function(URL){ 
    var protocols = ['http', 'https', 'ftp', 'sftp', 'ssh', 'smtp']; 
    var withProtocol = false; 
    if (URL.length > 0){ 
     protocols.forEach(function(el) { 
     if (URL.slice(0,4).indexOf(el) > -1){ 
      withProtocol = true; 
     } 
     }); 
     var newURL = URL; 
     if (!withProtocol){ 
     newURL = 'http://' + URL; 
     } 
     console.log(newURL + ' ' + URL); 
     return newURL; 
    } 
}; 

var parser = new DOMParser(); 
var doc = parser.parseFromString(content, "text/html"); 
var links = doc.getElementsByTagName("a"); 
for(var i=0; i<links.length; i++) { 
    links[i].setAttribute('href', addProtocolToLinks(links[i].href)); 
    console.log('result: ' + links[i].getAttribute('href')); 
} 

console.log('result html: '); 
console.log(doc); // also i need to fetch only my var content part, without html, body etc

http://jsfiddle.net/r3dgeo23/

但由于某些原因，它无法正常工作。我做错了什么？

答

如果我完全了解你的问题，这应该工作...

function jsF_addHTTP(url) 
    { 

     if (url !== "") 
     { 
      // Insert HTTP if it doesn't exist. 

      if (!url.match("^(http|https|ftp|sftp|ssh|smtp)://")) 
      { 
       url = "http://" + url; 
      } 
     } 
     return url; 
    }

答

你几乎一切权利，除了：

link[i].href

的回报，如果没有协议集不确定。因此，你给了函数addProtocolToLinks（undefined），它不起作用。

您可以使用：

getAttribute('href');

，使其工作，看到这个小提琴： http://jsfiddle.net/r3dgeo23/3/

/////编辑

这里是只取了一个小提琴内容部分而不是整个html： http://jsfiddle.net/r3dgeo23/5/

///// EDIT2

创建函数中使用的唯一ID的容器：

var container = document.createElement('div'); 
container.setAttribute("id", "content"); 
container.innerHTML = content;

http://jsfiddle.net/r3dgeo23/6/

））确保大公我的内容是动态的，我不仅可以将其更改为''

）...取不这样做） – brabertaser19

那么你可以创建你的函数内的容器 - 我编辑我的答案。 –

答

试试这个.. 据WORKING

var addProtocolToLinks = function(URL){ 
protocols = ['http', 'https', 'ftp', 'sftp', 'ssh', 'smtp']; 
protocols.forEach(function(item) { 
    if(url.indexOf(item) != -1) { 
    newUrl = "http://"+url.substr(url.indexOf("//")+2); 
    }  
}); 
return newUrl; 
}

示例演示在这里http://jsfiddle.net/d9p9534h/

让我知道它是否有效

答

这个怎么样？

function ensureProtocol(href) { 
    var match = href.match(/^((\w+)\:)?(.*)/); 
    var protocol = match[1] || 'https:'; 
    return protocol + match[3]; 
}

注：并非所有的URI有一个授权部分。这就是为什么正则表达式不包括//。见this article

答

function Protocol(url) 
    { 

     if (url !== "") 
     { 


      if (!url.match("^(http|https|ftp|sftp|ssh|smtp)://")) 
      { 
       url = "http://" + url; 
      } 
     } 
     return url; 
    }

javascript：阅读纯html字符串和使用DOMparser更改链接路径

相关推荐