节点表情符号列表 - Javascript

在Javascript中，节点表情符号可以通过以下方式获取:

let nodeList = document.querySelectorAll('emoji-selector');

其中，emoji-selector可以替换成对应的节点选择器，例如获取页面内所有的表情符号节点:

let emojiList = document.querySelectorAll('.emoji');

表情符号节点的属性

表情符号节点通常包含以下属性:

1. className: 表示节点的类名，可用来判断节点是否为表情符号
2. textContent: 表示节点内的文本内容，通常为空
3. src: 表示表情符号的图片地址
4. alt: 表示表情符号的描述文本
5. title: 表示表情符号的提示文本

获取表情符号节点的图片地址

表情符号节点的图片地址可以通过以下方式获取:

let emojiNode = document.querySelector('.emoji');
let imgUrl = emojiNode.src;

替换文本中的表情符号

将文本中的表情符号替换为对应的图片可以使用一下代码:

let str = 'Hello 😊World';
let regex = /:\w+:/g; // 匹配以冒号开头和结尾的单词
let emojiList = document.querySelectorAll('.emoji');
str = str.replace(regex, function(match) {
  let imgUrl = '';
  for (let i = 0; i < emojiList.length; i++) {
    if (emojiList[i].alt === match) {
      imgUrl = emojiList[i].src;
      break;
    }
  }
  return `<img src="${imgUrl}" alt="${match}" title="${match}" />`;
});

动态添加表情符号

可以使用以下代码动态添加表情符号:

let emojiList = ['😊', '😂', '😍', '😉'];
let container = document.querySelector('.emoji-container');
emojiList.forEach(function(emoji) {
  let imgNode = document.createElement('img');
  imgNode.src = `./images/${emoji}.png`;
  imgNode.alt = emoji;
  imgNode.title = emoji;
  container.appendChild(imgNode);
});

以上代码将会向类名为emoji-container的节点中添加表情符号。