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

Changing URL in string to clickable link while changing its value

本文关键字：链接 字符串 URL      更新时间：2023-09-26

对于一个小的webapp，我使用JS将字符串中的url更改为可点击的url，同时将url更改为'tap here'。然而问题是，如果我保持URl不变，而不改变它为"点击这里"，它都工作得很好。但如果我改变它，可点击的链接链接到一个错误页面:

未找到

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

这是我使用的工作代码(不更改为'tap Here')

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

   });
});

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

我复制并粘贴了您的代码: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上添加"破折号"，则regex无法获得完整的URI，并且在破折号上中断。

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

另一种情况是，当你已经在你的html链接与"href标签"的代码如下:

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