我試圖創建一個wysiwyg編輯器。目標是，當用戶粘貼或鍵入鏈接（I.E.粘貼或鍵入（空間）事件）時，編輯器會實時檢測它並辨別它是否爲圖像，視頻或其他內容。JavaScript - 匹配內部鏈接<a>或屬性

我試着在an answer for another question中建議一些庫，但是那些堅持做所有url的鏈接或者引起其他問題。我不確定最好的方法是什麼。我嘗試循環輸入字段的內容，但我無法使用嵌套元素。所以，我試圖將html內容轉換爲一個字符串，然後從中替換鏈接。

問題不匹配鏈接，互聯網充滿了great regexes。 但是，我如何才能匹配不在標籤內的鏈接或其他標籤的屬性？

我試圖在字符串的末尾添加一個負向前視（？！（\ </a> |「|'）（但我知道這不是完美的解決方案），但顯然這不起作用像我想的那樣。所以我完全失去了這個。

$(function(){ 
 
    document.write(searchLinks("Sample text https://www.google.fi/images/srpr/logo11w.png and http://google.com/ <a href='http://bing.com/'>http://bing.com/</a>")); 
 
}); 
 

 
function searchLinks(string){ 
 
\t var urlRegex =/\bhttps?:\/\/[a-zA-Z0-9()^=+*@&%#|~?!;:,.-_/]*[-A-Za-z0-9+&@#/%=~_()|](?!(\<\/a\>|"|'))/g; 
 
\t console.log(string.match(urlRegex)); 
 
\t string=string.replace(urlRegex, function(url){ 
 
\t \t if(url.match(/\.gifv/)!=null){ //gifv 
 
\t \t \t return gifvToVideo(url); 
 
\t \t }else if(url.match(/\.(jpeg|jpg|gif|png|svg)/)!=null){ //image 
 
\t \t \t return "<img src='"+url+"' alt='"+url+"'>"; 
 
\t \t }else if(url.match(/\.(mp4|webm)/)!=null){ //video 
 
\t \t \t return '<video><source src="'+url+'"></video>'; 
 
\t \t }else{ //link 
 
\t \t \t return '<a href="'+url+'" target="_blank">'+url+'</a>'; 
 
\t \t } 
 
\t }); 
 
\t return string; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

來源

2015-05-18 Ilpo Oksanen

使用正則表達式來處理HTML是一個糟糕的主意......它總是可以導致意想不到的結果... –

護理闡述或提供解釋爲什麼如此的鏈接？如果不是regexing它，我怎麼能找到並替換鏈接？就像我說的，我正在想法如何處理這個問題... –

嘗試http://jsfiddle.net/arunpjohny/5z12Lsgp/1/ - 是否解決您的問題 –

我想，我的選擇是創建一個DOM結構和迭代只喜歡

頂級文本節點

function searchLinks(html) { 
    var $tmp = $('<div />', { 
     html: html 
    }); 
    var urlRegex = /\bhttps?:\/\/[a-zA-Z0-9()^=+*@&%#|~?!;:,.-_\/]*[-A-Za-z0-9+&@#\/%=~_()|](?!(\<\/a\>|"|'))/g; 
    $tmp.contents().each(function() { 
     if (this.nodeType == Node.TEXT_NODE) { 
      var string = this.nodeValue; 

      string = string.replace(urlRegex, function (url) { 
       if (url.match(/\.gifv/) != null) { //gifv 
        return gifvToVideo(url); 
       } else if (url.match(/\.(jpeg|jpg|gif|png|svg)/) != null) { //image 
        return "<img src='" + url + "' alt='" + url + "'>"; 
       } else if (url.match(/\.(mp4|webm)/) != null) { //video 
        return '<video><source src="' + url + '"></video>'; 
       } else { //link 
        return '<a href="' + url + '" target="_blank">' + url + '</a>'; 
       } 
      }); 

      $(this).replaceWith(string) 
     } 
    }) 

    return $tmp.html(); 
}

演示：Fiddle

來源

2015-05-18 04:27:51

謝謝！我添加了一個else語句，以便它通過child-nodes：[fiddle]（http://jsfiddle.net/5z12Lsgp/4/）現在它似乎正在工作！ –

@IlpoOksanen http://jsfiddle.net/arunpjohny/5z12Lsgp/5/？ –

這更好，這應該是顯而易見的。再次感謝：） –

查找URL的屬性外

你可能在其他HTML元素的鏈接了。

一個選項是搜索不在屬性內的鏈接。下面的代碼不是防彈的，但格式良好的HTML應該適用於大多數情況。

如果您懷疑您的HTML格式不正確，請在使用下面的正則表達式之前整理它。

PHP例子：

preg_match_all("/(?<!\"|')(http|https|ftp|ftps)\\:\\/\\/[a-zA-Z0-9\\-\\.]+\\.[a-zA-Z]{2,3}(\\/\\S*)?/", $srcText, $rgxMatches) ;

正則表達式：

(?<!"|')(http|https|ftp|ftps)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?

來源

2015-10-21 11:44:41

JavaScript - 匹配內部鏈接<a>或屬性

回答

查找URL的屬性外

相關問題