AngularJS 从文本创建 html/link/anchor (escape/unescape html in view)

Posted 2023-02-19

【中文标题】AngularJS 从文本创建 html/link/anchor (escape/unescape html in view)

【英文标题】：AngularJS create html/link/anchor from text (escape/unescape html in view)

【发布时间】：2014-02-23 21:32:57

【问题描述】：

我有一个分配了值的控制器：

$scope.post = 'please visit http://***.com quickly';

我的 html 中有一些文本：

<p>post</p>

我想制作一个可点击的网址链接（用锚标签包围它）。

我尝试将我的 html 更改为：

<p ng-bind-html="post | createAnchors"></p>

这是一个简化的问题示例：

http://jsfiddle.net/T3fFt/4/

问题是，我怎样才能逃避整个帖子文本，除了链接，它会被锚标签包围？ ?

【问题讨论】：

为什么这个问题没有公认的答案。其中至少有一个是加藤批准的。做到这一点。

【参考方案1】：

我认为您可以为此使用 Angular 的链接过滤器：https://docs.angularjs.org/api/ngSanitize/filter/linky

你可以这样使用它：

<p ng-bind-html="post | linky"></p>

您必须包含 Angular 的清理模块才能使 linky 工作：

angular.module('myApp', [
    'ngRoute',
    'ngSanitize',
    'myApp.filters', 
    ...

【讨论】：

我认为 linky 过滤器从 AngularJS 1.0 开始就可以使用了：code.angularjs.org/1.0.2/docs/api/ngSanitize.filter:linky

@Daan 我在 Angular v1.2.21 上运行良好。 <div ng-bind-html="post.Text | linky:'_blank'"></div>

对任何想要使用 linkyFilter 的人的警告：它会转义 HTML 字符，因此您的原始 HTML 代码（但带有链接）将显示在 html 绑定元素中

是的，@Dylanthepiguy，这是这个问题的预期行为。

【参考方案2】：

你可以用这个替换字符串：

'please visit http://***.com quickly'.replace(/(http[^\s]+)/, '<a href="$1">$1</a>')

那么您需要使用$sce 服务和ngBindHtml 指令。

$sce 是一种提供严格上下文转义服务的服务 AngularJS。

因此，在您的过滤器中，您需要使用a 标签包装链接，然后使用$sce.trustAsHtml 返回一个受信任的html：

filter('createAnchors', function ($sce) 
    return function (str) 
        return $sce.trustAsHtml(str.
                                replace(/</g, '&lt;').
                                replace(/>/g, '&gt;').
                                replace(/(http[^\s]+)/g, '<a href="$1">$1</a>')
                               );
    
)

工作示例：http://jsfiddle.net/T3fFt/11/

【讨论】：

你能告诉我具体有哪些功能吗？我尝试了其中一些，但没有成功。

你试过trustAsHtml吗？

我说得对吗：当您设置 ng-bind-html 时，Angular 不会转义 html。当你手动设置 $sce.trustAsHtml 时，这也是一样的吧？所以在那种情况下，这对我没有帮助

这个解决方案的问题是文本的其余部分没有被转义。检查jsfiddle.net/T3fFt/5 另一个锚没有转义的地方。我用 jsfiddle 更新了我的问题。

我把你弄丢了，你不想转义字符串吗？