4

广泛搜索以回答我的问题，但一切似乎都非常复杂。我是 Javascript 的新手，我希望得到这个问题的帮助，而不是仅仅回答这个问题（如果你觉得有必要给出一个直接的答案，那么分解会很好）。

我有一个从 HTML 文本区域引入字符串的函数。我需要在字符串中搜索任何链接，因此，搜索“www”。或“http://”。然后我需要遍历该部分，直到链接结束（或出现空格）。这需要保存为变量，然后"<a href = newVar>"需要在开头放置a，然后与之后的新变量一起，然后以</a>标签结束。

字符串中可能有许多 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
        }
    }
}
4

2 回答 2

2

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

假设您有以下文本：

Lorem ipsum dolor sit amet, consectetur adipiscing elit。Duis faucibus dui nec est auctor 。Nullam vulputate，augue non auctor rhoncus，urna urna tempus velit，non tincidunt nibh orci et elit。整数 sed nibh massa，eget 前庭 velit。www.Nulla.com in elit vitae massa egestas accumsan ac semper nisl。Curabitur viverra lorem 在 urna porttitor 坐 amet aliquam sapien http://imperdiet.org。Pellentesque ultricies sagittis malesuada。Mauris lobortis aliquam felis 坐在前庭。在 vitae faucibus lectus 中。Donec consectetur ante nisi。Lorem ipsum dolor sit amet, consectetur adipiscing elit。暂停潜力。

里面有两个链接。代码看起来像这样。

以某种方式获取变量中的文本，我们将其称为text.

var text = '<that text above>';

现在我们将文本拆分为一个名为words.

var words = text.split(' ');

我们将在这个例子中产生新的输出，所以我们需要一个字符串变量来保存它。

var new_text = '';

您似乎了解循环，但这正是大多数循环通过数组的样子。

for (var i=0; i < words.length; i++) {
    var word = words[i];

我们检查这个“单词”的开头（在这种情况下，它指的是由空格分隔的每个文本部分）是否包含我们的任何一个前缀。实际上 bit.ly 是一个有效的 URL。正则表达式比我们更好地处理这个问题。

    if (word.indexOf('http://') === 0 || word.indexOf('www.') === 0) {

我们通过放置链接语法来更改单词的值。我使用 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 dolor sit amet, consectetur adipiscing elit。Duis faucibus dui nec est auctor 。Nullam vulputate，augue non auctor rhoncus，urna urna tempus velit，non tincidunt nibh orci et elit。整数 sed nibh massa，eget 前庭 velit。elit vitae massa egestas accumsan ac semper nisl 中的链接。Curabitur viverra lorem 在 urna porttitor 坐 amet aliquam sapien A LINK Pellentesque ultricies sagittis malesuada。Mauris lobortis aliquam felis 坐在前庭。在 vitae faucibus lectus 中。Donec consectetur ante nisi。Lorem ipsum dolor sit amet, consectetur adipiscing elit。暂停潜力。

注意到问题了吗？分裂技术看到' http://imperdiet.org '。作为网址。用户的意思是让 ' http://imperdiet.org ' 成为 url，并在它之后有一个句点。正则表达式还允许您避免这种情况。

该演示包含所有代码，中间没有我的评论。

演示

如果你想了解正则表达式，我推荐这个网站。

于 2013-02-26T00:09:40.420 回答
1

我建议遍历每个单词，用空格分隔。

//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 + ' ';
}, '');

这个解决方案并不完美，因为没有保留确切的空间，它会寻找 justhttp和 not https?://，但我会留给您解决这些问题。

http://jsfiddle.net/98gMb/

于 2013-02-26T00:11:46.567 回答