如何 1. 在 textarea 事件中检测 url，2：转换为 url。使用 AngularJS

Question

我们有一个简单的控件（文本区域），我们想在其中检测 'proper' url 的用户输入，并且： 1. 直观地将这些 'proper' url 转换为 link 并且 2. 触发一个事件，我们可以挂钩以检测已输入 'proper' link。

当然，textareas 的内容不能设置样式。不过，据我们所知，TinyMCE（通过 AngularUI）及其 'autolink' 插件可能是解决方案。然而，除了白名单之外，还不清楚如何 1. 我们可以 control/manage 'proper' link 是什么（例如 bit.ly 或 deliciou.us，等等现在是公共域）或 2. 除了使用 TinyMCE 的 'onChange' 和使用我们自己的自定义正则表达式之外，我们如何检测已输入正确 url 的事件。

虽然我们可以想象解决方案，但这是当今的普遍要求，我们很难找到预构建的解决方案来实现这一点。顺便说一句，我们正在使用 AngularJS.

非常感谢任何帮助或指点！谢谢，莫

Answer 1

我们有一个非常相似的情况，我们有一个文本区域，用户可以在其中输入任何内容，并且任何 url 都应该被转换并显示为可点击的 links。我们解决了它如下。在 div 中显示文本区域值。在显示之前，我们用一个像这样的小函数转换值：

 $scope.transformHrefsInAnswer = function(value) {
            var retval = value;
            if(retval != null) {
                var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
                retval = value.replace(urlRegex, function (url) {
                    return '<a href="' + url + '" target="_blank">' + url + '</a>';
                });
            }
            return retval;
        };

当用户点击 div 时，我们将其切换为可编辑的文本区域，并将实际值绑定到正确的 ng-model。然后他们可以放入任何他们想要的东西。当该区域失去焦点时，它会切换回 DIV，我们再次调用转换函数，使其显示为有效的、可点击的 link。

如果您只想验证，您可以使用带有次要模组的转换功能来检查匹配项。

希望对您有所帮助。

如何 1. 在 textarea 事件中检测 url，2：转换为 url。使用 AngularJS

How to 1. detect url in textarea event, 2: convert to url. Using AngularJS

angularjs

url

richtextbox

tinymce-4