Javascript for循环查找字符串中的URL并更改为链接?

Javascript for循环查找字符串中的URL并更改为链接?,javascript,string,url,hyperlink,Javascript,String,Url,Hyperlink,到处寻找来回答我的问题,但一切似乎都很复杂。 我是一个Javascript新手,我希望能在这个问题上得到帮助,而不是仅仅回答问题(如果你觉得有必要给出一个直截了当的答案,那么分解一下就好了) 我有一个从HTML文本区域引入字符串的函数。我需要在字符串中搜索任何链接,因此,搜索“www.”或“http://”。然后,我需要循环遍历该部分,直到链接结束(或出现空格)。这需要保存为变量,然后保存为“标记 字符串中可能有许多URL 我必须这样做作为一个for循环 我有一个启动码,但我被卡住了! 非常感谢

到处寻找来回答我的问题,但一切似乎都很复杂。 我是一个Javascript新手,我希望能在这个问题上得到帮助,而不是仅仅回答问题(如果你觉得有必要给出一个直截了当的答案,那么分解一下就好了)

我有一个从HTML文本区域引入字符串的函数。我需要在字符串中搜索任何链接,因此,搜索“www.”或“http://”。然后,我需要循环遍历该部分,直到链接结束(或出现空格)。这需要保存为变量,然后保存为
标记

字符串中可能有许多URL

我必须这样做作为一个for循环

我有一个启动码,但我被卡住了! 非常感谢您的帮助

//Checking for URL's in the message string
function checkLink(text)
{
    for (var i=0; i == text.length; i++)
    {
        var currentChar = text.charAt(i);
        if(text.charAt(i) == "w" && text.charAt(i+1) == "w" && text.charAt(i + 2) ==  "w" && text.charAt(i + 3) == ".")
        {
            //Not to sure what to do here
        }
    }
}

正则表达式是目前为止最好的方法。但是,由于这是出于教育目的,这里有一个在字符串中查找URL的方法。这不是一个正确的答案,但说明了概念

假设您有以下文本:

洛雷姆·伊普苏姆·多洛·希特·阿梅特(Lorem ipsum Door sit amet)是一位杰出的献祭者,他是福西布斯(Duis faucibus) 拍卖人和拍卖人之间的对决, 乌尔纳·乌尔纳·坦普尔·维利特,非蒂尼·奥奇和精英。整数sed 尼布·马萨(nibh massa),Elite vitae的前庭天鹅绒 乌尔纳的维韦拉博物馆 波特提托坐在阿梅特·阿利夸姆·萨皮恩的位子上 马利苏亚达慈菇 前庭。在生命之路中。不可在前庭进行。 Lorem ipsum dolor sit amet,奉献精英。Suspendisse 波蒂蒂

其中有两个链接。代码如下所示

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Duis faucibus dui nec est auctor auctor. Nullam vulputate, augue 
non auctor rhoncus, urna urna tempus velit, non tincidunt nibh 
orci et elit. Integer sed nibh massa, eget vestibulum 
velit. [A LINK](www.Nulla.com) in elit vitae massa egestas
accumsan ac semper nisl. Curabitur viverra lorem in urna 
porttitor sit amet aliquam sapien [A LINK](http://imperdiet.org.) 
Pellentesque ultricies sagittis malesuada. Mauris lobortis aliquam 
felis sit amet vestibulum. In vitae faucibus lectus. Donec 
consectetur ante nisi. Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Suspendisse potenti. 
以某种方式获取变量中的文本,我们称之为
text

var text = '<that text above>';
在本例中,我们将生成新的输出,因此需要一个字符串变量来保存它

var new_text = '';
看起来您理解循环,但这正是大多数通过数组的循环的样子

for (var i=0; i < words.length; i++) {
    var word = words[i];
我们通过放置链接语法来更改单词的值。我使用了Markdown,但你可以使用HTML或任何你喜欢的东西

         word = '[A LINK]' + '(' + word + ')';
    }
这是我们在脚本顶部讨论过的输出。只需继续在其上添加内容,无论它们是否被修改。问题是,在我们的单词后可能有1或94个空格,但我们总是放回一个。正则表达式具有更好地处理这一问题的功能

    new_text += word + ' ';
}
new_text
现在看起来像这样

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Duis faucibus dui nec est auctor auctor. Nullam vulputate, augue 
non auctor rhoncus, urna urna tempus velit, non tincidunt nibh 
orci et elit. Integer sed nibh massa, eget vestibulum 
velit. [A LINK](www.Nulla.com) in elit vitae massa egestas
accumsan ac semper nisl. Curabitur viverra lorem in urna 
porttitor sit amet aliquam sapien [A LINK](http://imperdiet.org.) 
Pellentesque ultricies sagittis malesuada. Mauris lobortis aliquam 
felis sit amet vestibulum. In vitae faucibus lectus. Donec 
consectetur ante nisi. Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Suspendisse potenti. 
它位于堆栈溢出上,如下所示:

洛雷姆·伊普苏姆·多洛·希特·阿梅特(Lorem ipsum Door sit amet)是一位杰出的献祭者,他是福西布斯(Duis faucibus) 拍卖人和拍卖人之间的对决, 乌尔纳·乌尔纳·坦普尔·维利特,非蒂尼·奥奇和精英。整数sed 尼布·马萨(nibh massa),elit的前庭天鹅绒 生命之旅 在乌尔纳港口,坐着一位名叫阿梅特·阿利夸姆·萨吉蒂的智者 malesuada。Mauris lobortis aliquam猫科动物坐在前庭。生命垂危 这是一个很好的例子 艾米特,我是一位杰出的告别者,我有能力

注意到一个问题吗?拆分技术将“.”视为url。用户的意思是将“”作为url,并在其后加上句点。正则表达式也允许您避免这种情况

演示包含所有代码,中间没有我的注释


如果您想了解正则表达式,我建议您。

我建议您对每个单词进行迭代,并按空格分隔

//split string by any space characters
textarea.value.split(/\s/).reduce(function (prev, cur) {
    //word starts with http; convert to link
    if (cur.indexOf('http') === 0) {
        cur = '<a href="' + cur + '">' + cur + '</a>';
    }
    //word starts with www; convert to http://+link
    else if (cur.indexOf('www') === 0) {
        cur = '<a href="http://' + cur + '">' + cur + '</a>';
    }
    //append space to display properly
    return prev + cur + ' ';
}, '');
//按任意空格字符拆分字符串
textarea.value.split(/\s/).reduce(函数(prev,cur){
//word以http开头;转换为链接
if(cur.indexOf('http')==0){
cur='';
}
//word以www开头;转换为http://+链接
else if(cur.indexOf('www')==0){
cur='';
}
//添加空间以正确显示
返回上一个+当前+“”;
}, '');
这个解决方案并不完美,因为没有保留确切的空间,它只查找
http
,而不是
https?://
,但我将把这些问题留给您来解决


为什么要循环执行?这是家庭作业吗?@JademlHolland你应该研究并开始简单的匹配。@slamborne-查看拆分函数,似乎是一个很好的方法。谢谢你的帮助:)@Jademlholland-没问题。如果你想看到一个简单的解决方案,我会这样开始:First提示:不要找w…然后w…然后w…只要找
www
。你可以使用
s.indexOf('www');
奇妙的答案,帮了我很大的忙!谢谢你的帮助@FakeRasinBrigand
//split string by any space characters
textarea.value.split(/\s/).reduce(function (prev, cur) {
    //word starts with http; convert to link
    if (cur.indexOf('http') === 0) {
        cur = '<a href="' + cur + '">' + cur + '</a>';
    }
    //word starts with www; convert to http://+link
    else if (cur.indexOf('www') === 0) {
        cur = '<a href="http://' + cur + '">' + cur + '</a>';
    }
    //append space to display properly
    return prev + cur + ' ';
}, '');