Question

长话短说，我有一个在Wix.com编辑器下制作的网站，几个月前编码就成了可能。我已经设置了一个自定义评论框，因此用户可以发表他们的评论，并阅读其他评论。

现在的问题是，“注释输入”采用纯文本，每当发布链接时，它都会显示为纯文本，没有颜色，没有可点击性。

我想要一个“读取”评论列表的代码，并将每个以“https”或“http”或“www”开头的文字转换为橙色且可点击（在新标签中打开）

有任何解决方案吗？

谢谢！

我尝试过很多东西，比如：

<script src="https://unpkg.com/vue"></script>

<div id="app"></div>

text95 =显示的评论（这是一个文本，可以重复自己的评论数量）

Answer 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, '<a href="$1" target="_blank">$1</a>');

    //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<a href="http://$2" target="_blank">$2</a>');

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

    return replacedText;
}

用以下方式调用：

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

Answer 2

我不确定int compare_strings(const char *a, const char *b) { const int la = strlen(a); const int lb = strlen(b); const int r = strncmp(a, b, la<lb?la:lb); return (la == lb || r) ? r : (la < lb) ? compare_strings(a, b + la) : compare_strings(a + lb, b); }是什么，或者你是否真的可以像这样分配html，但是我猜这是jquery，因为$w最常见的是jquery对象。

你的尝试很接近，那就是......

$

试试..

＆＃13;

$('#text95').html($('#text95').html().replace(/((http:|https:)[^\s]+[\w])/g, '<a href="$1" target="_blank">$1</a>'));

＆＃13;

$('#text95').html($('#text95').html().replace(/((http:|https:)[^\s]+[\w])/g, '<a href="$1" target="_blank">$1</a>'));

＆＃13;

Answer 3

这是我的答案：

function convertLinks(text) {

    var link = text.match(/(?:www|https?)[^\s]+/g),
        aLink = [],
        replacedText = text;

    if (link != null) {

      for (i=0;i<link.length;i++) {
        var replace;
        if (!( link[i].match(/(http(s?))\:\/\//) ) ) { replace = 'http://' + link[i]; } else { replace = link[i] };
        var linkText = replace.split('/')[2];
        if (linkText.substring(0,3) == "www") { linkText = linkText.replace('www.','') };
        aLink.push('<a href="' + replace + '" target="_blank">' + linkText + '</a>');
        replacedText = replacedText.split(link[i]).join(aLink[i]);
      }

      return repText

    } else {
      return text
    }
  }

这会将纯文本中的长而笨拙的链接替换为该文本中的可单击短链接。

示例：

This clumsy link https://stackoverflow.com/questions/49634850/javascript-convert-plain-text-links-to-clickable-links/52544985#52544985 is very clumsy and this http://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split is not much better. This one www.apple.com is nice but www could be omitted

成为：

This clumsy link <a href="https://stackoverflow.com/questions/49634850/javascript-convert-plain-text-links-to-clickable-links/52544985#52544985" target="_blank">stackoverflow.com</a> is very clumsy and this <a href="http://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split" target="_blank">developer.mozilla.org</a> is not much better. This one <a href="http://www.apple.com" target="_blank">apple.com</a> is nice but www could be omitted

显示为：

这个笨拙的链接stackoverflow.com非常笨拙，这个developer.mozilla.org也不是更好。这个apple.com很不错，但是可以删除www

Answer 4

我纠正了philipeachille的错误代码，因为youtubeID参数不正确。我还纠正了YouTube直接链接。

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

    if (linksFound != null) {
        for (let i = 0; i < linksFound.length; i++) {
            let replace = linksFound[i];

            if (!(linksFound[i].match(/(http(s?)):\/\//))) {
                replace = 'http://' + linksFound[i]
            }

            let linkText = replace.split('/')[2];

            if (linkText.substring(0, 3) == 'www') {
                linkText = linkText.replace('www.', '')
            }

            if (linkText.match(/youtu/)) {
                const youtubeID = replace.split('/').slice(-1)[0].split('=')[1];

                if (youtubeID === undefined || youtubeID === '') {
                    aLink.push('<a href="' + replace + '" target="_blank">' + linkText + '</a>');
                } else {
                    aLink.push('<span class="video-wrapper"><iframe src="https://www.youtube.com/embed/' + youtubeID + '" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></span>');
                }
            } else {
                aLink.push('<a href="' + replace + '" target="_blank">' + linkText + '</a>');
            }

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

用法：

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);

（Javascript）将纯文本链接转换为可点击链接

4 个答案: