如何向选定文本添加标签并在之前/之后关闭/打开父级

Question

尝试用 Javascript 创建 Richt Texteditor。我有一个标签

<span class="text-3xl">Foo</span>

并想将其编辑为类似的内容

<span class="text-3xl">F</span><span class="text-sm">o</span><span class="text-3xl">o</span>

我的第一次尝试成功了，可以在另一个标签中插入一个标签

<span class="text-3xl">F<span class="text-sm">o</span>o</span>

使用此代码：

  var spanElement= document.createElement("span");
  spanElement.className = size;
  var selection= window.getSelection().getRangeAt(0);
  var selectedText = selection.extractContents();
  elem.appendChild(selectedText);
  selection.insertNode(elem);

但需要一些帮助来关闭/重新打开内部标签之前/之后的标签。

Answer 1

一旦您拥有以下两个数组：

• 字符数组：

  ['F', 'o', 'o']

• 类数组：

  ['text-3xl', 'text-sm', 'text-3xl']

您可以构建字符串：

<span class="text-3xl">F</span><span class="text-sm">o</span><span class="text-3xl">o</span>

您需要在 JavaScript 中显式声明 class Array。

但是您可以从原始 <span> 中提取

字符数组

。

---

工作示例：

// EXTRACT ARRAY OF CHARACTERS FROM ORIGINAL SPAN
const originalSpan = document.querySelector('.original');
const originalSpanText = originalSpan.textContent;
const originalSpanTextArray = originalSpanText.split('');

// DECLARE LIST OF CLASSES
const classArray = ['text-3xl', 'text-sm', 'text-3xl'];

// BUILD NEW HTML
let newHTML = '';

originalSpanTextArray.forEach((character, i) => {
  newHTML += `<span class="${classArray[i]}">${character}</span>`;
});

// LOG NEW HTML
console.log(newHTML);

<span class="original text-3xl">Foo</span>

---

进一步阅读：

上例中的主力是

template literal

，两端用反引号分隔：

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals