At.js API
At.js 是一个开源的 JavaScript 库，用于实现类似 Twitter 的 @提及功能，通过 At.js，开发者可以轻松地在文本中解析并高亮显示用户提及的内容，以下是关于 At.js API 的详细内容：
安装
npm install at.js
引入
import at from 'at.js';
初始化
需要创建一个at 实例，传入一个配置对象，配置对象可以指定各种选项，如 @符号、高亮样式等。
const mentions = at('@');
解析文本
使用mentions.parse() 方法解析文本，返回包含所有提及信息的数组，每个提及信息包括用户名和位置等信息。
const text = "Hello @alice, how are you?";
const parsed = mentions.parse(text);
console.log(parsed);
// 输出: [{username: "alice", index: 7, length: 5}]
高亮显示
使用mentions.highlight() 方法将解析后的文本进行高亮显示。
const highlighted = mentions.highlight(text); console.log(highlighted); // 输出: "Hello <mark>@alice</mark>, how are you?"
At.js 提供了多种配置选项，可以根据需求进行调整，以下是一些常用的配置选项：
| 选项名 | 类型 | 默认值 | 描述 |
| symbol | string | "@" | 指定触发提及的字符 |
| highlightClass | string | "mention" | 指定高亮显示的 CSS 类名 |
| threshold | number | 1 | 最小提及长度 |
| limit | number | Infinity | 最大提及数量 |
| search | object | {} | 自定义搜索逻辑 |
示例
const mentions = at('@', {
highlightClass: 'custom-mention',
threshold: 3,
});
自定义搜索逻辑
如果需要自定义搜索逻辑，可以通过search 选项传入一个函数，该函数接收两个参数：文本和当前光标位置，返回一个包含匹配结果的对象。
const mentions = at('@', {
search: (text, pos) => {
// 自定义搜索逻辑
return [];
}
});
相关问题与解答
问题1：如何更改高亮显示的 CSS 类名？
解答：可以通过配置对象的highlightClass 选项来更改高亮显示的 CSS 类名。
const mentions = at('@', {
highlightClass: 'my-custom-class'
});
然后在 CSS 中定义相应的样式：
.my-custom-class {
background-color: yellow;
}
问题2：如何限制提及的最大数量？
解答：可以通过配置对象的limit 选项来限制提及的最大数量。
const mentions = at('@', {
limit: 5
});
这样，即使文本中有超过5个提及，也只会解析和高亮显示前5个。
各位小伙伴们，我刚刚为大家分享了有关“at.js api”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/652256.html
微信扫一扫 