如何使用javascript检查字符串中是否包含url的任何地方，并将其转换为锚标记

Question

我有一个textarea，我正在获取用户的输入数据。但我需要知道是否有任何URL在文本区，并将其转换为锚标记。例如:

Textarea数据:Hi I'm Abdul. My Website is https://website.com

锚定标签后:Hi I'm Abdul. My Website is <a href="https://website.com">https://website.com</a>

目前我的代码是:

var status = $('#status').val();
var urlCheck = new RegExp("([a-zA-Z0-9]+://)?([a-zA-Z0-9_]+:[a-zA-Z0-9_]+@)?([a-zA-Z0-9.-]+\.[A-Za-z]{2,4})(:[0-9]+)?(/.*)?");
if(urlCheck.test(status)) {
alert("url inside");
console.log(urlCheck.exec(status)[0]);
}

这是我当前的代码，但我不知道如何在该字符串中替换url与锚标记。

Answer 1

我不确定我是否正确理解了您的意思，但是您是想在现场更改还是在表单发送后更改?如果是后者，我会尝试这样做:

var urlCheck = new RegExp("([a-zA-Z0-9]+://)?([a-zA-Z0-9_]+:[a-zA-Z0-9_]+@)?([a-zA-Z0-9.-]+\.[A-Za-z]{2,4})(:[0-9]+)?(/.*)?");
if(urlCheck.test(status)) {
alert("url inside");
console.log(urlCheck.exec(status)[0]);
// Here my possible solution (not tried out)
$('#status').val('<a href="http://'+urlCheck.exec(status)[0]+"' target='_blank'>the link</a>");
}

但是这也意味着你可以/必须用RegEX检查用户是否输入了http。

Answer 2

var status = $('#status').text();
var urlCheck = new RegExp("([a-zA-Z0-9]+://)?([a-zA-Z0-9_]+:[a-zA-Z0-9_]+@)?([a-zA-Z0-9.-]+\.[A-Za-z]{2,4})(:[0-9]+)?(/.*)?");
if(urlCheck.test(status)) {
alert("It has an URL!");
console.log(urlCheck.exec(status)[0]);
}
document.getElementById("status").innerHTML = status.replace(urlCheck.exec(status)[0],"<a href='"+urlCheck.exec(status)[0]+"'>"+urlCheck.exec(status)[0]+"</a>");

<div id="status">Hi I'm Abdul. My Website is https://website.com</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

我们可以使用html.replace()来替换我们想要的标签中的url。

Answer 3

你必须使用JS的replace()函数。

我将下面的示例设置为一个输入文本区和一个输出文本区，让您看到它们的区别。

function addUrl() {
var status = $('#status').val();
var urlCheck = /(([a-zA-Z0-9]+://)?([a-zA-Z0-9_]+:[a-zA-Z0-9_]+@)?([a-zA-Z0-9.-]+.[A-Za-z]{2,4})(:[0-9]+)?(/.*)?)/;
$('#output').val(status.replace(urlCheck, '<a href="$1">$1</a>'));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="status">Input</label>
<textarea id="status" onChange="addUrl()"></textarea>
<br/>
<label for="output">Output</label>
<textarea id="output"></textarea>

Answer 4

使用linkifyHtml或linkifyString: Linkify String接口。使用linkify-string将纯文本字符串中的链接替换为锚标记。