javascript - 将 URL 从输入转换为链接

Question

我有一个输入框，发送的内容使用 angular.js 显示在下方，但如果输入是 http url，我会尝试将其转换为链接。我提到了 How to replace plain URLs with links?这个 SO 页面..
我可以将它转换为标签，但它不是链接。它就像任何其他文本一样..

fiddle 链接:http://jsfiddle.net/JY3Za/1/

HTML 代码:

<div ng-app>

<div ng-controller="URL">
  <form ng-submit="addTodo()">
      <input type="text" ng-model="save"  size="30"
      placeholder="enter a url"/>
      <input class="btn-primary" type="submit" value="add"/>
</form>
  <h1>{{replaceURLWithHTMLLinks(show)}}</h1>
</div>
</div>

和JS代码..

function URL($scope) {
$scope.shoe="";

$scope.addTodo = function() {
$scope.show=$scope.save;
  $scope.replaceURLWithHTMLLinks=function(text) {

var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/i;
return text.replace(exp,"<a href='$1'>$1</a>"); 
};
};

}

PS:正则表达式不是我写的，是从上面的Stackoverflow链接上拿来测试的..

Answer 1

如果您绑定(bind)到一个包含 HTML 的值，您应该使用 ngBindHtml ，如文件所示here .出于安全原因，常规绑定(bind)(以 <span>{{ foo }}</span> 的形式)阻止注入(inject)实际的 HTML。

如果你使用足够新的 AngularJS 版本，还要记住 $sce 的限制。已记录 here ，这将需要一些额外的工作来告诉 AngularJS 该字符串是安全的。

<h1 data-ng-bind-html="yourBindingHere"></h1>

作为旁注，您的 replaceURLWithHTMLLinks可以用 AngularJS 的 linky 变得多余过滤器，在 ngSanitize 中可用模块:

<h1 data-ng-bind-html="yourBindingHere | linky"></h1>