Hướng dẫn how to convert text to link in javascript - cách chuyển đổi văn bản thành liên kết trong javascript

Question

11

Nội dung chính Show

Làm thế nào để bạn biến văn bản thành một liên kết trong JavaScript?
Làm cách nào để biến một văn bản thành một liên kết?
Làm thế nào để bạn biến văn bản thành một liên kết trong HTML?
Làm cách nào để chuyển đổi các liên kết văn bản đơn giản thành siêu liên kết tự động?

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Tóm lại, tôi có một trang web được thực hiện theo biên tập viên Wix.com và mã hóa đã được thực hiện vài tháng trước. Tôi đã thiết lập một hộp bình luận tùy chỉnh, để người dùng có thể đăng bình luận của họ và đọc những người khác.

Bây giờ, điều này là, "đầu vào nhận xét" lấy văn bản đơn giản và bất cứ khi nào một liên kết được đăng, nó được hiển thị dưới dạng văn bản thuần túy, không màu, không có khả năng nhấp chuột.

Tôi muốn một mã 'đọc' danh sách các bình luận và chuyển đổi mọi văn bản bắt đầu bằng 'https' hoặc 'http' hoặc 'www' ... màu cam và có thể nhấp (mở trong một tab mới)

Bất kỳ giải pháp xin vui lòng?

Cảm ơn !

Tôi đã thử nhiều thứ như:

$w('#text95').html = 
       (/((http:|https:)[^\s]+[\w])/g, '$1').replace;

Text95 = các nhận xét được hiển thị (nó là một văn bản lặp lại cho bao nhiêu bình luận như có)

Ivar

5.67612 Huy hiệu vàng51 Huy hiệu bạc58 Huy hiệu Đồng12 gold badges51 silver badges58 bronze badges

Hỏi ngày 3 tháng 4 năm 2018 lúc 16:23Apr 3, 2018 at 16:23

2

Có vẻ như cú pháp thay thế của bạn là sai. Hãy thử một cái gì đó như thế này. Tôi khá chắc chắn rằng điều này sẽ hoạt động.

function linkify(inputText) {
    var replacedText, replacePattern1, replacePattern2, replacePattern3;

    //URLs starting with http://, https://, or ftp://
    replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
    replacedText = inputText.replace(replacePattern1, '$1');

    //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
    replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
    replacedText = replacedText.replace(replacePattern2, '$1$2');

    //Change email addresses to mailto:: links.
    replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
    replacedText = replacedText.replace(replacePattern3, '$1');

    return replacedText;
}

Gọi nó với:

$w('#text95').innerHTML = linkify($w('#text95').html);

Hướng dẫn how to convert text to link in javascript - cách chuyển đổi văn bản thành liên kết trong javascript

Isherwood

54,6K15 Huy hiệu vàng106 Huy hiệu bạc147 Huy hiệu đồng15 gold badges106 silver badges147 bronze badges

Đã trả lời ngày 3 tháng 4 năm 2018 lúc 16:28Apr 3, 2018 at 16:28

3

Đây là câu trả lời của tôi (phiên bản cải tiến bao gồm các liên kết video).

Xem thêm Codepen này ở đây.

const convertLinks = ( input ) => {

  let text = input;
  const linksFound = text.match( /(?:www|https?)[^\s]+/g );
  const aLink = [];

  if ( linksFound != null ) {

    for ( let i=0; i

' )
}
else if ( linkText.match( /vimeo/ ) ) {
let vimeoID = replace.split( '/' ).slice(-1)[0];
aLink.push( '



');
}
} else {
aLink.push('' + linkText + '');
}
text = text.split(linksFound[i]).map(item => {
return aLink[i].includes('iframe') ? item.trim() : item
}).join(aLink[i]);
}
return text;
}
else {
return input;
}
};

Usage:

const text = 'Hello. This is a link https://www.google.com and this is youtube video https://www.youtube.com/watch?v=O-hnSlicxV4';

convertLinks(text);

Đã trả lời ngày 8 tháng 4 năm 2020 lúc 13:11Apr 8, 2020 at 13:11

2

Tôi thực sự thích giải pháp của @Philipeachille. Nó nhẹ và làm những điều cần thiết. Tuy nhiên, nó có một vài vấn đề tôi cần giải quyết:

Nếu một liên kết được theo dõi ngay lập tức bởi một dấu chấm câu, dấu chấm câu được bao gồm trong liên kết
Nếu cùng một liên kết được bao gồm nhiều lần, logic sẽ bị nhầm lẫn

Một số liên kết không bắt đầu với

function linkify(inputText) {
    var replacedText, replacePattern1, replacePattern2, replacePattern3;

    //URLs starting with http://, https://, or ftp://
    replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
    replacedText = inputText.replace(replacePattern1, '$1');

    //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
    replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
    replacedText = replacedText.replace(replacePattern2, '$1$2');

    //Change email addresses to mailto:: links.
    replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
    replacedText = replacedText.replace(replacePattern3, '$1');

    return replacedText;
}

8 hoặc

function linkify(inputText) {
    var replacedText, replacePattern1, replacePattern2, replacePattern3;

    //URLs starting with http://, https://, or ftp://
    replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
    replacedText = inputText.replace(replacePattern1, '$1');

    //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
    replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
    replacedText = replacedText.replace(replacePattern2, '$1$2');

    //Change email addresses to mailto:: links.
    replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
    replacedText = replacedText.replace(replacePattern3, '$1');

    return replacedText;
}

9, ví dụ

$w('#text95').innerHTML = linkify($w('#text95').html);

0

Tôi đã lấy được những điều sau đây từ mã của anh ấy, khắc phục các vấn đề này và bỏ qua các công cụ nhúng video mà tôi không muốn:

function linkify(inputText) {
    var replacedText, replacePattern1, replacePattern2, replacePattern3;

    //URLs starting with http://, https://, or ftp://
    replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
    replacedText = inputText.replace(replacePattern1, '$1');

    //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
    replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
    replacedText = replacedText.replace(replacePattern2, '$1$2');

    //Change email addresses to mailto:: links.
    replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
    replacedText = replacedText.replace(replacePattern3, '$1');

    return replacedText;
}

0

Để giải thích biểu thức chính quy chính:

```
$w('#text95').innerHTML = linkify($w('#text95').html);
```
1 nhìn phía sau (trước) liên kết để xác định nơi liên kết bắt đầu, đó là bất kỳ khoảng trắng nào hoặc đầu của chuỗi
```
$w('#text95').innerHTML = linkify($w('#text95').html);
```
2 khớp với sự khởi đầu của một liên kết - một mẫu như xxx.x hoặc thậm chí xxx: //xxx.xxxx.x or even xxx://xxx.x
- ```
$w('#text95').innerHTML = linkify($w('#text95').html);
```
  3 Một sự kết hợp của một hoặc nhiều chữ cái, dấu gạch nối, dấu chấm hoặc dấu gạch chéo
- ```
$w('#text95').innerHTML = linkify($w('#text95').html);
```
  4 theo sau ngay lập tức bởi một dấu chấm
- ```
$w('#text95').innerHTML = linkify($w('#text95').html);
```
  5 theo sau ngay sau một lá thư khác

$w('#text95').innerHTML = linkify($w('#text95').html);

6 khớp với phần còn lại của liên kết.

$w('#text95').innerHTML = linkify($w('#text95').html);

7 nhìn về phía trước (sau) liên kết để xác định nơi liên kết kết thúc

$w('#text95').innerHTML = linkify($w('#text95').html);

8 Lookahead tích cực

```
$w('#text95').innerHTML = linkify($w('#text95').html);
```
9 Liên kết được kết thúc bằng bất kỳ khoảng trắng nào hoặc vào cuối chuỗi

const convertLinks = ( input ) => {

  let text = input;
  const linksFound = text.match( /(?:www|https?)[^\s]+/g );
  const aLink = [];

  if ( linksFound != null ) {

    for ( let i=0; i

' )
}
else if ( linkText.match( /vimeo/ ) ) {
let vimeoID = replace.split( '/' ).slice(-1)[0];
aLink.push( '' )
}
else {
aLink.push( '' + linkText + '' );
}
text = text.split( linksFound[i] ).map(item => { return aLink[i].includes('iframe') ? item.trim() : item } ).join( aLink[i] );
}
return text;
}
else {
return input;
}
}

0 Trừ khi không gian trắng hoặc cuối chuỗi ngay trước một trong bảy dấu chấm câu này, trong trường hợp dấu chấm câu này kết thúc liên kết.

Về mặt kỹ thuật, tôi cũng nên cho phép các chữ số khi khớp với sự bắt đầu của một liên kết, để W3.org sẽ được liên kết, ví dụ. Tuy nhiên, điều này có thể liên kết các số thập phân như 2.25, vì vậy tôi đã chọn không làm như vậy.w3.org would be linkified, for example. However, this could linkify decimal numbers such as 2.25, so I have opted not to do so.

Đây là một đoạn trích nếu bạn muốn thử một số khối văn bản khác nhau để xem cách chúng được liên kết:

function linkify(inputText) {
    var replacedText, replacePattern1, replacePattern2, replacePattern3;

    //URLs starting with http://, https://, or ftp://
    replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
    replacedText = inputText.replace(replacePattern1, '$1');

    //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
    replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
    replacedText = replacedText.replace(replacePattern2, '$1$2');

    //Change email addresses to mailto:: links.
    replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
    replacedText = replacedText.replace(replacePattern3, '$1');

    return replacedText;
}

1

function linkify(inputText) {
    var replacedText, replacePattern1, replacePattern2, replacePattern3;

    //URLs starting with http://, https://, or ftp://
    replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
    replacedText = inputText.replace(replacePattern1, '$1');

    //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
    replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
    replacedText = replacedText.replace(replacePattern2, '$1$2');

    //Change email addresses to mailto:: links.
    replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
    replacedText = replacedText.replace(replacePattern3, '$1');

    return replacedText;
}

2

Đã trả lời ngày 4 tháng 4 lúc 8:27Apr 4 at 8:27

Brett Donaldbrett DonaldBrett Donald

3.9334 Huy hiệu vàng21 Huy hiệu bạc47 Huy hiệu đồng4 gold badges21 silver badges47 bronze badges

1

Đã trả lời ngày 27 tháng 9 năm 2018 lúc 20:54

function linkify(inputText) {
    var replacedText, replacePattern1, replacePattern2, replacePattern3;

    //URLs starting with http://, https://, or ftp://
    replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
    replacedText = inputText.replace(replacePattern1, '$1');

    //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
    replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
    replacedText = replacedText.replace(replacePattern2, '$1$2');

    //Change email addresses to mailto:: links.
    replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
    replacedText = replacedText.replace(replacePattern3, '$1');

    return replacedText;
}

3

Tôi không chắc

function linkify(inputText) {
    var replacedText, replacePattern1, replacePattern2, replacePattern3;

    //URLs starting with http://, https://, or ftp://
    replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
    replacedText = inputText.replace(replacePattern1, '$1');

    //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
    replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
    replacedText = replacedText.replace(replacePattern2, '$1$2');

    //Change email addresses to mailto:: links.
    replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
    replacedText = replacedText.replace(replacePattern3, '$1');

    return replacedText;
}

5 là gì hoặc nếu bạn thực sự có thể gán HTML như vậy, nhưng tôi đoán đây là jQuery vì

function linkify(inputText) {
    var replacedText, replacePattern1, replacePattern2, replacePattern3;

    //URLs starting with http://, https://, or ftp://
    replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
    replacedText = inputText.replace(replacePattern1, '$1');

    //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
    replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
    replacedText = replacedText.replace(replacePattern2, '$1$2');

    //Change email addresses to mailto:: links.
    replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
    replacedText = replacedText.replace(replacePattern3, '$1');

    return replacedText;
}

6 thường đề cập đến đối tượng jQuery.

function linkify(inputText) {
    var replacedText, replacePattern1, replacePattern2, replacePattern3;

    //URLs starting with http://, https://, or ftp://
    replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
    replacedText = inputText.replace(replacePattern1, '$1');

    //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
    replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
    replacedText = replacedText.replace(replacePattern2, '$1$2');

    //Change email addresses to mailto:: links.
    replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
    replacedText = replacedText.replace(replacePattern3, '$1');

    return replacedText;
}

4

Thử của bạn đã gần, nó sẽ là ..Oct 12, 2021 at 12:33

Làm thế nào để bạn biến văn bản thành một liên kết trong JavaScript?

Approach:..

Tạo một phần tử neo ..

Tạo một nút văn bản với một số văn bản sẽ hiển thị dưới dạng liên kết ..

Nối nút văn bản vào phần tử neo ..

Đặt thuộc tính Tiêu đề và HREF của phần tử ..

Chất nối phần tử trong cơ thể ..

Làm cách nào để biến một văn bản thành một liên kết?

Nếu bạn chỉ muốn định dạng văn bản hiện có thành một siêu liên kết: Chọn văn bản mà bạn muốn biến thành một siêu liên kết và nhấp chuột phải vào menu phím tắt, nhấp vào Hộp thoại HyperLink. Hộp và bấm OK.Select the text that you want to turn into a hyperlink, and right-click it. On the shortcut menu, click Hyperlink. In the Insert Hyperlink dialog, paste the link in the Address box and click OK.

Làm thế nào để bạn biến văn bản thành một liên kết trong HTML?

Để tạo một siêu liên kết trong trang HTML, hãy sử dụng các thẻ và các thẻ, là các thẻ được sử dụng để xác định các liên kết.Thẻ cho biết nơi siêu liên kết khởi động và thẻ cho biết nơi nó kết thúc.Bất cứ văn bản nào được thêm vào bên trong các thẻ này, sẽ hoạt động như một siêu liên kết.Thêm URL cho liên kết trong.use the and tags, which are the tags used to define the links. The tag indicates where the hyperlink starts and the tag indicates where it ends. Whatever text gets added inside these tags, will work as a hyperlink. Add the URL for the link in the .