如何在前端插入符号到文本框中？

在前端开发过程中，有时我们需要在文本框中插入一些特殊符号，比如表情、图片、甚至是自定义的文本格式等。本文将介绍如何实现这些功能以及相关的注意事项。

插入符号的位置

在文本框中插入符号的位置可以是光标所在的位置或者是文本框的末尾。如果要插入到光标所在的位置，则需要先获取光标所在的位置，然后在该位置插入符号。如果要插入到文本框的末尾，则只需要将符号添加到文本框的值（value）属性即可。

下面是获取光标所在位置并在该位置插入符号的示例代码：

function insertAtCursor(el, value) {
  const start = el.selectionStart;
  const end = el.selectionEnd;
  el.value = el.value.substring(0, start) + value + el.value.substring(end);
  el.selectionStart = el.selectionEnd = start + value.length;
  el.focus();
}

上述代码中，el表示文本框元素，value表示要插入的符号。首先获取光标所在的位置，然后使用 substring() 方法将符号插入到该位置，最后设置新的光标位置，使光标停留在插入的符号后面。

插入特殊符号

插入表情

插入表情是常见的需求之一。现在许多应用和网站都支持在输入框中插入表情，可以让用户更生动地表达自己的情感。通常使用图片或者 Unicode 码来表示表情。

下面是使用 Unicode 码来表示表情的示例代码：

function insertEmoji(el, emoji) {
  insertAtCursor(el, String.fromCodePoint(`0x${emoji}`));
}

上述代码中，emoji 是一个代表表情的 Unicode 码点（比如 1F600 表示笑脸表情），使用 String.fromCodePoint() 方法把该码点转换成对应的字符，然后调用 insertAtCursor() 函数插入到文本框中。

插入图片

插入图片需要先选择一张图片，然后将其转换成 data URL 格式，最后将该字符串插入到文本框中。下面是将图片转换成 data URL 的示例代码：

function convertImageToDataURL(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
  });
}

上述代码使用 FileReader 对象将图片文件转换成 data URL 格式，返回一个 Promise 对象。接下来就可以使用类似下面的代码将该字符串插入到文本框中：

const input = document.querySelector('input[type="file"]');
const textarea = document.querySelector('textarea');
input.addEventListener('change', async () => {
  const file = input.files[0];
  const dataURL = await convertImageToDataURL(file);
  textarea.value += `\n![](${dataURL})`;
});

上述代码中，首先获取文件输入框和文本框元素，然后监听文件选择事件。当用户选择一张图片文件时，调用 convertImageToDataURL() 函数将其转换成 data URL 格式，并将该字符串插入到文本框中。

自定义文本格式

有时候我们需要在文本框中插入一些自定义的文本格式，比如粗体、斜体、链接等。这可以通过在文本框中插入一些标记来实现。下面是一个使用 Markdown 标记实现常见文本格式的示例代码：

function insertMarkdown(el, tag) {
  const start =

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/9375) ，转载请注明来源
[https://www.javascriptcn.com/post/9375](https://www.javascriptcn.com/post/9375)