Question

我正用这个敲打我的头，经过几个小时的谷歌搜索，搜索Stack Exchange和反复试验我无法弄明白。任何帮助都将非常感激！

我正在尝试用链接替换段落中的主题标签。我已经能够通过以下方式实现这一目标：

var str = $('.item p').html(),
  regex = /(?:\s|^)(?:#(?!\d+(?:\s|$)))(\w+)(?=\s|$)/gi;

function replacer(){
  var replacementString = $.trim(str.match( regex )[0]);
  return ' <a href="https://www.example.com/'+ replacementString +'" target="_blank">' + replacementString + '</a>';
}
$('.item p').html( str.replace( regex , replacer ) );

这会成功替换主题标签，但是当我使用[0]时，如果有多个主题标签，那么它只用第一个标签替换主题标签。到目前为止，这是一个JSFiddle。我需要尝试弄清楚如何用指向该特定主题标签的链接替换每个主题标签。

我不确定我是否应该使用循环并递增[0]，或者我是否在这里完全错误的方向，并且有更简单的方法来执行此操作。

如果有人有任何指示，我真的很感激它！

约翰

Answer 1

在您的函数上进行这样的简单更改将会执行您想要的操作：

function replacer(hash){
  var replacementString = $.trim(hash);
  return ' <a href="https://www.example.com/'+ replacementString +'" target="_blank">' + replacementString + '</a>';
}

在这种情况下，不需要在replacer调用的.replace函数内进行匹配，因为该函数的第一个参数已经是当前匹配的子字符串。

<强> JSFiddle Demo

编辑：如果你想匹配中间没有空格的主题标签，你可以稍微修改你的正则表达式：

(?:|^)(?:#(?!\d+(?:\s|$)))(\w+)(?=\s|#|$)

<强> UPDATED JSFiddle Demo

Answer 2

这是一个使用纯javascript的方法：

String.prototype.parseHashtag = function() {
    return this.replace(/[#]+[A-Za-z0-9-_]+/g, function(t) {
        var tag = t.replace("#","")
        return '<a href="https://www.example.com/'+ tag + '" target="_blank">' + tag + '</a>';
    });
};

var input = "some randomg string #something some text";

console.log(input.parseHashtag()); // some randomg string <a href="https://www.example.com/something" target="_blank">something</a> some text

请参阅jsFiddle

使用JavaScript在链接中包装多个主题标签

2 个答案: