Question

我正在创建一个我放置了Textarea的应用程序，现在我的要求是我有一个单词列表，所以每当我在textarea中输入任何东西时，如果单词与可用列表匹配，它将以颜色backgraoud突出显示，我在Angular2中寻找这个解决方案，但没有得到任何东西。如果任何人可以建议任何插件。

Answer 1

angular text input highlight怎么样？

npm link：https://www.npmjs.com/package/angular-text-input-highlight

只需使用模板参考变量#textarea

即可

<textarea
    mwlTextInputElement
    [(ngModel)]="text"
    #textarea>
</textarea>

然后将引用传递给它们的高亮组件。

<mwl-text-input-highlight
    [tags]="tags"
    [textInputElement]="textarea">
</mwl-text-input-highlight>

标签输入接受一个标签对象数组，这是一个可以找到索引的函数，来自How to find indices of all occurrences of one string in another in JavaScript?

function getIndicesOf(searchStr, str, caseSensitive) {
var searchStrLen = searchStr.length;
if (searchStrLen == 0) {
    return [];
}
var startIndex = 0, index, indices = [];
if (!caseSensitive) {
    str = str.toLowerCase();
    searchStr = searchStr.toLowerCase();
}
while ((index = str.indexOf(searchStr, startIndex)) > -1) {
    indices.push(index);
    startIndex = index + searchStrLen;
}
return indices;
}

现在要获取标记对象，我们可以使用以下函数，它返回一个标记对象列表。

function GetTagObject(searchstr, str, caseSensitive, cssClass) {
  const startingIndices = getIndicesOf(searchstr, str, caseSensitive);

  return startingIndices.map((index) => {
     return {
    indices: {
      start: index,
      end: index + searchstr.length
    },
    cssClass: cssClass,
    data: searchstr
  }
  })
}

现在您需要做的就是通过字符串数组使用loop（reduce）并从上面运行函数。

const text = "Stackoverflow is awesome! Perfect! awesome!";
const matchText = ["awesome", "perfect"];

const result = matchText.reduce((acc, cur) => 
  acc.concat(GetTagObject(cur, text, false, "red"))
, []);

在Angular2中我们如何使用textareaHighlight插件

1 个答案: