如何在AngularJS输入框中将指定文本替换为超链接？

嘿，这个需求挺实际的，但直接用原生的 <input> 标签是没法实现的——因为input元素本质是单行纯文本输入控件，只能渲染纯文本内容，不支持解析HTML超链接。不过咱们有几种靠谱的变通方案，能达成你想要的效果：

方案1：用contenteditable元素替代input（支持编辑+渲染链接） #

AngularJS原生不支持给contenteditable元素绑定ng-model，所以我们需要自定义一个指令来实现双向绑定，同时处理文本到链接的替换：

第一步：自定义指令 #

angular.module('yourApp').directive('contenteditableLink', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      // 从Model同步到View：把文本中的THIS替换为超链接
      ngModelCtrl.$render = function() {
        const rawText = ngModelCtrl.$viewValue || '';
        // 替换逻辑，这里可以根据需求调整正则匹配规则
        const formattedContent = rawText.replace(/THIS/g, '<a href="https://www.google.com">THIS</a>');
        element.html(formattedContent);
      };

      // 从View同步到Model：把编辑后的纯文本存回Model
      element.on('blur keyup input', function() {
        scope.$apply(function() {
          ngModelCtrl.$setViewValue(element.text());
        });
      });
    }
  };
});

第二步：HTML使用方式 #

<div contenteditable-link ng-model="inputValue" style="border:1px solid #ccc; padding:4px; min-height:20px;"></div>

注意：这个方案要留意XSS风险，如果输入内容来自不可信用户，需要额外做内容过滤。

方案2：分离输入框与显示区域（更安全） #

如果担心contenteditable的XSS问题，或者更倾向于传统的输入/展示分离模式，可以用隐藏输入框+可点击切换的展示区域：

第一步：创建过滤器处理链接替换 #

angular.module('yourApp').filter('linkifyThis', function($sce) {
  return function(text) {
    if (!text) return '';
    const linkedText = text.replace(/THIS/g, '<a href="https://www.google.com">THIS</a>');
    // 必须用$sce.trustAsHtml标记为安全HTML才能渲染
    return $sce.trustAsHtml(linkedText);
  };
});

第二步：HTML布局与交互 #

<!-- 隐藏的输入框，负责绑定Model -->
<input type="hidden" ng-model="inputValue">

<!-- 带链接的展示区域，点击切换到编辑模式 -->
<div 
  class="display-area" 
  ng-click="isEditing = true" 
  ng-hide="isEditing"
  ng-bind-html="inputValue | linkifyThis"
  style="border:1px solid #ccc; padding:4px; cursor:pointer;"
></div>

<!-- 编辑用的input，失去焦点切回展示模式 -->
<input 
  ng-model="inputValue" 
  ng-show="isEditing" 
  ng-blur="isEditing = false"
  style="border:1px solid #ccc; padding:4px;"
>

这个方案的优势是输入和展示完全分离，输入时是纯文本，展示时才渲染链接，安全性更高，也更符合传统表单的交互逻辑。

内容的提问来源于stack exchange，提问作者Serhiy