Javascript: чтение простой html-строки и использование пути ссылок DOMparser

В моем приложении angular, используя один из WYSIWYG, я могу вставлять ссылки без протокола. И это плохо:

Мне нужно разобрать строку и изменить всю ссылку (если у thay не было протокола до http://...)

и я пытаюсь сделать это:

var content = '<p>7</p><p>77</p><p><br></p><p><a href="#" onclick="location.href='http://example.com'; return false;" 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/

Но по некоторым причинам он работает неправильно. Что я делаю неправильно?

Ответы

Ответ 1

у вас было почти все правильно, кроме этого:

link[i].href

возвращает undefined, если протокол не установлен. Поэтому вы дали вам функцию addProtocolToLinks (undefined), и она не сработала.

Вы можете использовать:

getAttribute('href');

чтобы заставить его работать, см. эту скрипту: http://jsfiddle.net/r3dgeo23/3/

/////EDIT

Вот скрипка для получения только части контента, а не всего html: http://jsfiddle.net/r3dgeo23/5/

/////EDIT2

Создайте контейнер с уникальным идентификатором внутри вашей функции:

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

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

Ответ 2

Если я полностью понял ваш вопрос, это должно сработать...

    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;
    }

Ответ 3

Попробуйте это. Это РАБОТА

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/

Сообщите мне, если это сработало

Ответ 4

Как насчет этого?

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

ПРИМЕЧАНИЕ. Не каждый URI имеет часть полномочий. Поэтому регулярное выражение не включает //. См. в этой статье

Ответ 5

function Protocol( url )
    {

        if (url !== "") 
        {


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