Question

我有一些锚标签，我正在使用角度指令来装饰（下划线）文本（以指示键盘快捷键）。到目前为止，只有当指定的字符（对于“amt-alt-key”）位于第一个单词的开头时，我的代码才有效。我需要做的是搜索整个字符串并在第一次出现指定字符时加下划线。所以现在如果我在下面的例子中指定了一个amt-alt-key =“A”，那么它将正常工作。但是，问题是第一次出现的可能是锚文本中的任何位置。任何帮助编写正确的JavaScript都将非常感激。

- 詹森

 In my html
 <a href="#/Agent" amt-alt-key="P">Agent Data</a>

 In my angular code
 app.directive("amtAltKey", function () {
    return {
        link: function (scope, elem, attrs) {
            var altKey = attrs.amtAltKey.toUpperCase();
            var text = el.innerText;
            var textUpper = text.toUpperCase();
            var indexOfKey = textUpper.indexOf(altKey);

            var newText = text.substring(0, indexOfKey);
            newText += '<u>' + text.substring(indexOfKey, 1) + '</u>';
            if (indexOfKey + 1 < text.length) { newText += text.substring(indexOfKey + 1); }
            el.innerHTML = newText;
            keyListeners[altKey] = el;
        }
    };
});

Answer 1

您可以使用正则表达式检查所需的模式和replaceText实用程序函数来替换匹配的模式，一旦您有了文本，请替换元素的现有内容，如下所示：

.directive('amtAltKey', function () {
   return {
    link: function (scope, elem, attrs) {
      var altKey = new RegExp(attrs.amtAltKey, 'i');
      var text = elem.text();

      function replaceText (txt) {
        function underline(match) {
          return '<u>' + match +'</u>';
        }
        return txt.replace(altKey, underline);
      }

      var newText = replaceText(text);
      elem.html(newText);
    }
  };
});

以下是一个工作示例：https://jsbin.com/zefodo/2/edit?html,js,console,output

Answer 2

使用此：

app.directive("amtAltKey", function () {
return {
    link: function (scope, elem, attrs) {
        var altKey = attrs.amtAltKey;
        var text = elem.innerText;

        elem.innerHTML = text.replace(new RegExp(altKey, 'i'), '<u>$&</u>');

        keyListeners[altKey] = elem;
    }
};
});

Answer 3

试试这个

app.directive("amtAltKey", function() {
  return {
    link: function(scope, elem, attrs) {
      var el = elem[0];
      var altKey = "" + attrs.amtAltKey.toUpperCase();
      var text = el.innerText;
      var textUpper = text.toUpperCase();
      var indexOfKey = textUpper.indexOf(altKey);
      if (indexOfKey > -1) {
        var newText = text.substr(0, indexOfKey);
        newText += '<u>' + text.substr(indexOfKey, 1) + '</u>';
        if (indexOfKey + 1 < text.length) {
          newText += text.substr(indexOfKey + 1);
        }
        el.innerHTML = newText;
        keyListeners[altKey] = el;
      }
    }
  };
});

尝试使用Javascript / Angular强调字符的第一次出现

3 个答案: