[javascript] JavaScript를 사용하여 텍스트에서 URL 감지

누구든지 문자열 집합에서 URL을 감지하기위한 제안이 있습니까?

arrayOfStrings.forEach(function(string){
  // detect URLs in strings and do something swell,
  // like creating elements with links.
});

업데이트 : 링크 감지를 위해이 정규식을 사용하여 마무리했습니다 … 분명히 몇 년 후에.

kLINK_DETECTION_REGEX = /(([a-z]+:\/\/)?(([a-z0-9\-]+\.)+([a-z]{2}|aero|arpa|biz|com|coop|edu|gov|info|int|jobs|mil|museum|name|nato|net|org|pro|travel|local|internal))(:[0-9]{1,5})?(\/[a-z0-9_\-\.~]+)*(\/([a-z0-9_\-\.]*)(\?[a-z0-9+_\-\.%=&amp;]*)?)?(#[a-zA-Z0-9!$&'()*+.=-_~:@/?]*)?)(\s+|$)/gi

전체 도우미 (선택적 핸들 바 지원)는 요점 # 1654670에 있습니다.

답변

먼저 URL과 일치하는 좋은 정규식이 필요합니다. 이것은 어렵다. 참조 여기 , 여기 와 여기 :

… 거의 모든 것이 유효한 URL입니다. 나누기위한 구두점 규칙이 있습니다. 문장 부호가 없으면 여전히 유효한 URL이 있습니다.

RFC를주의 깊게 확인하고 “유효하지 않은”URL을 구성 할 수 있는지 확인하십시오. 규칙은 매우 유연합니다.

예를 들어 :::::유효한 URL입니다. 경로는":::::" 입니다. 꽤 바보 같은 파일 이름이지만 유효한 파일 이름입니다.

또한 /////유효한 URL입니다. netloc ( “hostname”)은 ""입니다. 경로는 "///"입니다. 다시, 바보. 또한 유효합니다. 이 URL은"///"
어느 것이 동등한 지 .

같은 "bad://///worse/////"
것이 완벽하게 유효합니다. 멍청하지만 유효합니다.

어쨌든이 대답은 최고의 정규 표현식을 제공하는 것이 아니라 JavaScript로 텍스트 안에 문자열 줄 바꿈을 수행하는 방법에 대한 증거입니다.

좋아, 그냥 이것을 사용하십시오 : /(https?:\/\/[^\s]+)/g

다시 말하지만 이것은 나쁜 정규 표현식 입니다. 많은 오 탐지가있을 것입니다. 그러나이 예제에는 충분합니다.

function urlify(text) {
  var urlRegex = /(https?:\/\/[^\s]+)/g;
  return text.replace(urlRegex, function(url) {
    return '<a href="' + url + '">' + url + '</a>';
  })
  // or alternatively
  // return text.replace(urlRegex, '<a href="$1">$1</a>')
}

var text = 'Find me at http://www.example.com and also at http://stackoverflow.com';
var html = urlify(text);

console.log(html)

스 니펫 확장

// html now looks like:
// "Find me at <a href="http://www.example.com">http://www.example.com</a> and also at <a href="http://stackoverflow.com">http://stackoverflow.com</a>"

결론적으로 시도해보십시오.

$$('#pad dl dd').each(function(element) {
    element.innerHTML = urlify(element.innerHTML);
});

답변

다음은 정규식으로 사용한 결과입니다.

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

URL에 후행 문장 부호는 포함되지 않습니다. 초승달의 기능은 매력처럼 작동합니다. 🙂

function linkify(text) {
    var urlRegex =/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    return text.replace(urlRegex, function(url) {
        return '<a href="' + url + '">' + url + '</a>';
    });
}

답변

나는이 문제를 꽤 오랫동안 봤다.이를 달성하기 위해 꽤 강력한 정규식을 사용하는 android.text.util.Linkify 안드로이드 메소드가 있다는 것이 나에게 일어났다. 운 좋게도 안드로이드는 오픈 소스입니다.

서로 다른 유형의 URL을 일치시키기 위해 몇 가지 다른 패턴을 사용합니다. 여기에서 모두 찾을 수 있습니다.
http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/2.0_r1/android/text/util/Regex.java#Regex에서 . 0WEB_URL_PATTERN

WEB_URL_PATTERN과 일치하는 URL, 즉 RFC 1738 사양을 준수하는 URL에 관심이있는 경우 다음을 사용할 수 있습니다.

/((?:(http|https|Http|Https|rtsp|Rtsp):\/\/(?:(?:[a-zA-Z0-9\$\-\_\.\+\!\*\'\(\)\,\;\?\&\=]|(?:\%[a-fA-F0-9]{2})){1,64}(?:\:(?:[a-zA-Z0-9\$\-\_\.\+\!\*\'\(\)\,\;\?\&\=]|(?:\%[a-fA-F0-9]{2})){1,25})?\@)?)?((?:(?:[a-zA-Z0-9][a-zA-Z0-9\-]{0,64}\.)+(?:(?:aero|arpa|asia|a[cdefgilmnoqrstuwxz])|(?:biz|b[abdefghijmnorstvwyz])|(?:cat|com|coop|c[acdfghiklmnoruvxyz])|d[ejkmoz]|(?:edu|e[cegrstu])|f[ijkmor]|(?:gov|g[abdefghilmnpqrstuwy])|h[kmnrtu]|(?:info|int|i[delmnoqrst])|(?:jobs|j[emop])|k[eghimnrwyz]|l[abcikrstuvy]|(?:mil|mobi|museum|m[acdghklmnopqrstuvwxyz])|(?:name|net|n[acefgilopruz])|(?:org|om)|(?:pro|p[aefghklmnrstwy])|qa|r[eouw]|s[abcdeghijklmnortuvyz]|(?:tel|travel|t[cdfghjklmnoprtvwz])|u[agkmsyz]|v[aceginu]|w[fs]|y[etu]|z[amw]))|(?:(?:25[0-5]|2[0-4][0-9]|[0-1][0-9]{2}|[1-9][0-9]|[1-9])\.(?:25[0-5]|2[0-4][0-9]|[0-1][0-9]{2}|[1-9][0-9]|[1-9]|0)\.(?:25[0-5]|2[0-4][0-9]|[0-1][0-9]{2}|[1-9][0-9]|[1-9]|0)\.(?:25[0-5]|2[0-4][0-9]|[0-1][0-9]{2}|[1-9][0-9]|[0-9])))(?:\:\d{1,5})?)(\/(?:(?:[a-zA-Z0-9\;\/\?\:\@\&\=\#\~\-\.\+\!\*\'\(\)\,\_])|(?:\%[a-fA-F0-9]{2}))*)?(?:\b|$)/gi;

다음은 소스의 전체 텍스트입니다.

"((?:(http|https|Http|Https|rtsp|Rtsp):\\/\\/(?:(?:[a-zA-Z0-9\\$\\-\\_\\.\\+\\!\\*\\'\\(\\)"
+ "\\,\\;\\?\\&\\=]|(?:\\%[a-fA-F0-9]{2})){1,64}(?:\\:(?:[a-zA-Z0-9\\$\\-\\_"
+ "\\.\\+\\!\\*\\'\\(\\)\\,\\;\\?\\&\\=]|(?:\\%[a-fA-F0-9]{2})){1,25})?\\@)?)?"
+ "((?:(?:[a-zA-Z0-9][a-zA-Z0-9\\-]{0,64}\\.)+"   // named host
+ "(?:"   // plus top level domain
+ "(?:aero|arpa|asia|a[cdefgilmnoqrstuwxz])"
+ "|(?:biz|b[abdefghijmnorstvwyz])"
+ "|(?:cat|com|coop|c[acdfghiklmnoruvxyz])"
+ "|d[ejkmoz]"
+ "|(?:edu|e[cegrstu])"
+ "|f[ijkmor]"
+ "|(?:gov|g[abdefghilmnpqrstuwy])"
+ "|h[kmnrtu]"
+ "|(?:info|int|i[delmnoqrst])"
+ "|(?:jobs|j[emop])"
+ "|k[eghimnrwyz]"
+ "|l[abcikrstuvy]"
+ "|(?:mil|mobi|museum|m[acdghklmnopqrstuvwxyz])"
+ "|(?:name|net|n[acefgilopruz])"
+ "|(?:org|om)"
+ "|(?:pro|p[aefghklmnrstwy])"
+ "|qa"
+ "|r[eouw]"
+ "|s[abcdeghijklmnortuvyz]"
+ "|(?:tel|travel|t[cdfghjklmnoprtvwz])"
+ "|u[agkmsyz]"
+ "|v[aceginu]"
+ "|w[fs]"
+ "|y[etu]"
+ "|z[amw]))"
+ "|(?:(?:25[0-5]|2[0-4]" // or ip address
+ "[0-9]|[0-1][0-9]{2}|[1-9][0-9]|[1-9])\\.(?:25[0-5]|2[0-4][0-9]"
+ "|[0-1][0-9]{2}|[1-9][0-9]|[1-9]|0)\\.(?:25[0-5]|2[0-4][0-9]|[0-1]"
+ "[0-9]{2}|[1-9][0-9]|[1-9]|0)\\.(?:25[0-5]|2[0-4][0-9]|[0-1][0-9]{2}"
+ "|[1-9][0-9]|[0-9])))"
+ "(?:\\:\\d{1,5})?)" // plus option port number
+ "(\\/(?:(?:[a-zA-Z0-9\\;\\/\\?\\:\\@\\&\\=\\#\\~"  // plus option query params
+ "\\-\\.\\+\\!\\*\\'\\(\\)\\,\\_])|(?:\\%[a-fA-F0-9]{2}))*)?"
+ "(?:\\b|$)";

정말 화려하고 싶다면 이메일 주소도 테스트 할 수 있습니다. 이메일 주소의 정규식은 다음과 같습니다.

/[a-zA-Z0-9\\+\\.\\_\\%\\-]{1,256}\\@[a-zA-Z0-9][a-zA-Z0-9\\-]{0,64}(\\.[a-zA-Z0-9][a-zA-Z0-9\\-]{0,25})+/gi

추신 : 위 정규식이 지원하는 최상위 도메인은 2007 년 6 월 현재 최신 상태입니다. 최신 목록을 보려면 https://data.iana.org/TLD/tlds-alpha-by-domain.txt 를 확인 하십시오. .

답변

초승달 기준 답변을

http : //가 없는 http : // 또는 www에 의한 링크를 감지하려는 경우 당신은 다음을 사용할 수 있습니다

function urlify(text) {
    var urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g;
    //var urlRegex = /(https?:\/\/[^\s]+)/g;
    return text.replace(urlRegex, function(url,b,c) {
        var url2 = (c == 'www.') ?  'http://' +url : url;
        return '<a href="' +url2+ '" target="_blank">' + url + '</a>';
    })
}

답변

NPM 의이 라이브러리는 매우 포괄적 인 것 같습니다 https://www.npmjs.com/package/linkifyjs

Linkify는 작지만 포괄적 인 JavaScript 플러그인으로 일반 텍스트에서 URL을 찾아 HTML 링크로 변환합니다. 유효한 모든 URL 및 이메일 주소와 함께 작동합니다.

답변

이미지를 렌더링하기 위해 기능을 더욱 향상시킬 수 있습니다.

function renderHTML(text) {
    var rawText = strip(text)
    var urlRegex =/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;

    return rawText.replace(urlRegex, function(url) {

    if ( ( url.indexOf(".jpg") > 0 ) || ( url.indexOf(".png") > 0 ) || ( url.indexOf(".gif") > 0 ) ) {
            return '<img src="' + url + '">' + '<br/>'
        } else {
            return '<a href="' + url + '">' + url + '</a>' + '<br/>'
        }
    })
}

또는 실제 크기 이미지로 연결되는 썸네일 이미지의 경우 :

return '<a href="' + url + '"><img style="width: 100px; border: 0px; -moz-border-radius: 5px; border-radius: 5px;" src="' + url + '">' + '</a>' + '<br/>'

그리고 여기에 기존 HTML을 제거하여 균일 성을 위해 텍스트 문자열을 사전 처리하는 strip () 함수가 있습니다.

function strip(html)
    {
        var tmp = document.createElement("DIV");
        tmp.innerHTML = html;
        var urlRegex =/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
        return tmp.innerText.replace(urlRegex, function(url) {
        return '\n' + url
    })
}

답변

let str = 'https://example.com is a great site'
str.replace(/(https?:\/\/[^\s]+)/g,"<a href='$1' target='_blank' >$1</a>")

쇼트 코드 빅 워크! …

결과:-

 <a href="https://example.com" target="_blank" > https://example.com </a>