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

Question

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

找不到

请求的 URL /client/http://www.google.com' target='_blank'>在此服务器上找不到点击此处。

这是我正在使用的有效代码（无需更改为“点击此处”）

 $('.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'>$1</a>");

        $(this).html(replaced_text);


   });
});

这是我想要工作的，但给出了错误：

$('.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);


   });
});

[编辑] 这是 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>

Answer 1

我在此处复制并粘贴了您的代码：http://plnkr.co/edit/CK2vJdeIxtN1Bvt7Kce5?p=preview，并带有以下 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>

在这个特定的场景下，一切都很好。你能粘贴你的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>