Javascript 将字符串中的URL更改为可单击链接，同时更改其值

对于一个小webapp，我使用JS将字符串中的url更改为可点击的url，同时将url更改为“点击此处”。但问题是，如果我保持URl不变，而不将其更改为“点击此处”，则一切正常。但如果我更改它，可单击的链接将链接到错误页面：

找不到

请求的URL/客户端/http://www.google.com' 在此服务器上找不到target=''blank'>点击此处

下面是我正在使用的代码（不更改为“点击此处”）

$（'.discussion'）.ready（函数（）{
$（'.discussion#messages p'）。每个（函数（）{
var str=$（this.html（）；
var regex=/（https？：\/\/（[-\w\.]+）+（：\d+）（\/（[\w\/\.]*（\？\S+）））/ig
var replaced_text=str.replace（regex，“”）；
$（this）.html（替换为文本）；
});
});

这是我想做的，但给出了一个错误：

$('.discussion').ready(function(){

    $('.discussion #messages p').each(function(){

      var str = $(this).html();

        var regex = /(https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w\/_\.]*(\?\S+)?)?)?)/ig

        var replaced_text = str.replace(regex, "<a href='$1' target='_blank'>tap here</a>");

        $(this).html(replaced_text);


   });
});

$（'.discussion'）.ready（函数（）{
$（'.discussion#messages p'）。每个（函数（）{
var str=$（this.html（）；
var regex=/（https？：\/\/（[-\w\.]+）+（：\d+）（\/（[\w\/\.]*（\？\S+）））/ig
var replaced_text=str.replace（regex，“”）；
$（this）.html（替换为文本）；
});
});

[编辑]这是HTML

<ol class="discussion" scroll-bottom="replies">
    <div ng-class="getClass($index)" ng-repeat="reply in replies track by $index">
      <li ng-repeat="item in reply.text.replace('?','.').replace('!','.').split('. ') track by $index" class="fix-clutter">
        <div class="avatar">
          <img ng-src="{{reply.avatar}}">
        </div>

        <div id="messages" class="animated slideInUp">

          <p class="animated fadeInUp">{{item}}</p>

        </div>
       </li>
    </div>
  </ol>

{{item}

我在这里复制并粘贴了您的代码：使用以下HTML：

<div class="discussion">
  <div id="messages">
    <p>
      http://stackoverflow.com/questions/32395188/changing
    </p>
    <p>
      http://stackoverflow.com/questions/32395188/changing
    </p>
  </div>
</div>

http://stackoverflow.com/questions/32395188/changing


http://stackoverflow.com/questions/32395188/changing

在这个特定场景中，一切都很好。你能粘贴你的HTML吗？ 但是正则表达式不能正常工作。如果在URI上添加“破折号”，正则表达式将无法获取完整的URI，并在破折号上中断

更新： 我又查了一遍。。。问题90%是由正则表达式规则引起的

另一种情况是，当您的html上已经有“href标记”的链接，如下所示：

<div class="discussion">
  <div id="messages">
    <p>
      <a href="http://stackoverflow.com/questions/32395188/changing'>LINK</a>
    </p>
  </div>
</div>

我在这里复制并粘贴了您的代码：使用以下HTML：

<div class="discussion">
  <div id="messages">
    <p>
      http://stackoverflow.com/questions/32395188/changing
    </p>
    <p>
      http://stackoverflow.com/questions/32395188/changing
    </p>
  </div>
</div>

http://stackoverflow.com/questions/32395188/changing


http://stackoverflow.com/questions/32395188/changing

在这个特定场景中，一切都很好。你能粘贴你的HTML吗？ 但是正则表达式不能正常工作。如果在URI上添加“破折号”，正则表达式将无法获取完整的URI，并在破折号上中断

更新： 我又查了一遍。。。问题90%是由正则表达式规则引起的

另一种情况是，当您的html上已经有“href标记”的链接，如下所示：

<div class="discussion">
  <div id="messages">
    <p>
      <a href="http://stackoverflow.com/questions/32395188/changing'>LINK</a>
    </p>
  </div>
</div>

Tnx为了您的时间，我添加了HTML。我在HTML中没有任何链接，数据是通过php添加的。不幸的是，这对我帮助不大。我需要来自php的示例数据来修复正则表达式规则。顺便说一句，我不知道你在用Angular。此时，我建议您将所有这些逻辑移到AngularJS中的自定义过滤器中，并将其应用到如下项：{item | myCustomFilter}}。（）谢谢你，我已经添加了HTML。我在HTML中没有任何链接，数据是通过php添加的。不幸的是，这对我帮助不大。我需要来自php的示例数据来修复正则表达式规则。顺便说一句，我不知道你在用Angular。此时，我建议您将所有这些逻辑移到AngularJS中的自定义过滤器中，并将其应用到如下项：{item | myCustomFilter}}。()