javascript - 尝试使用 javascript 将文本区域中的链接替换为超链接会出现数组错误

Question

每当用户在文本区域中输入内容并在其中发布一些链接时，我立即想将其更改为链接，就像 stackoverflow.com 在任何人输入 https://stackoverflow.com/?q=and+message+continues+till+end 时所做的那样。但每当有人传递任何非链接文本时，它都会返回文本外观...

这是我的尝试，我所做的，在我将其发布到下面之前，让我告诉你我不是 javascript 学生，我只是想剪切粘贴并使用我的其他编程逻辑并尝试实现它。因此，每当您回复时，请考虑一下我的 no-solid-javascript 背景。

谢谢

我的尝试如下:-

function isUrl(s) {
    var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
        return regexp.test(s);
    }

$('#status').keyup(function() {
    var value = $("#status").val();
    var words = value.split(" ");
    for (var i=0;i<words.length;i++)
    {
        var n = isUrl(words[i]);
        if (n)  {
            var deadLink = '<a href="'+words[i]+'" target="_blank" rel="nofollow">'+words[i]+'</a>';
            words[i].replace(words[i], deadLink);
        }
    }
});

这不起作用，我在这里没有收到任何错误，但是当我在没有数组索引的情况下使用它时，如下所示，我收到数组错误:-

for (var i=0;i<words.length;i++)
{
    var n = isUrl(words);
    if (n)  {
    var deadLink = '<a href="http://google.com/search?q='+words+'" target="_blank" rel="nofollow">'+words+'</a>';
    words.replace(words, deadLink);
    }
}

有办法解决吗？

谢谢

Answer 1

主要问题:

• 您的 replace() 调用没有任何效果，因为您没有将它们分配给任何内容。
• 您没有使用生成的 words 数组 - 您只是对其进行了处理，然后……什么也没有。

我所做的一些更改:

• 添加了一行来转义键入的文本:

  var value = $('<div/>').text(nonEscapedValue).html();
  

• 更改了 replace() 行以分配 replace() 的结果:

  words[i] = words[i].replace(words[i], deadLink);
  

• 最后添加了一行将处理后的数组放入 div 中:

  $("#myResultDiv").html(words.join(" "));
  

最终代码(check jsfiddle demo here):

function isUrl(s) {
    var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
    return regexp.test(s);
}
$('#status').keyup(function() {
    var nonEscapedValue = $("#status").val();
    // added line below to escape typed text
    var value = $('<div/>').text(nonEscapedValue).html();
    var words = value.split(" ");
    for (var i=0;i<words.length;i++)
    {
        var n = isUrl(words[i]);
        if (n)  {
            var deadLink = '<a href="'+words[i]+'" target="_blank" rel="nofollow">'+words[i]+'</a>';
            // changed line below to assign replace()'s result
            words[i] = words[i].replace(words[i], deadLink);
        }
    }
    // added line below to put the result in to the div #myResultDiv
    $("#myResultDiv").html(words.join(" "));
});

希望这能帮助您实现目标。