组合字符串和元素并插入innerHtml答案

【问题标题】：Combine string and element and insert it in innerHtml组合字符串和元素并插入innerHtml
【发布时间】：2022-01-21 21:47:00
【问题描述】：

想象一下我有一些元素

<p>Hello</p>

用户在e 和l 字母之间单击（在此位置放置插入符号），在此单击时，我想在这些字母之间插入一些element。会是

<p>He<b>Here</b>llo</p>

有什么办法吗？

代码示例：

  const selection = document.getSelection();
  const parent = selection.baseNode.parentNode;
  const b = document.createElement('b')
  b.innerHTML = 'Here'

  parent.innerHTML = 'he'+ b + 'llo'

它不会像你理解的那样工作，我需要这种情况的解决方案。我可以确定插入符号的位置

selection.focusOffset

这意味着我必须获取选择文本，并在插入符号位置插入 <b>Here</b> 元素。我也试图找到将元素转换为字符串的方法，但还没有找到。我的意思是document.createElement(tagName) 将其设为字符串，然后我可以将其插入文本中

【问题讨论】：

是的，但是你需要发布minimal reproducible example。我不想写所有的JavaScript，工作量太大，所以发布一些损坏的JS，我会尝试修复它。
确定在单击文本节点时将插入符号放在何处并不是一个容易解决的问题——有一个non-standard 方法，但它并不普遍可用。（剩下的问题是微不足道的，只要你想出插入它的确切位置，就可以插入任何你想要的东西。）
更新了一点，如果有帮助的话

标签： javascript

【解决方案1】：

您可以使用 Selection 中 Range 的 insertNode 方法来做到这一点。

这是一个基本的例子：

const p = document.querySelector('p')
p.addEventListener('click', () => {
  const selection = document.getSelection();
  if(!selection.isCollapsed || !selection.containsNode(p, true))
    return
  const b = document.createElement('b')
  b.innerText = 'here'
  const range = selection.getRangeAt(0)
  range.insertNode(b)
  range.collapse() //unselect inserted text
})

&lt;p&gt;Some text&lt;/p&gt;

【讨论】：

【解决方案2】：

      const selection = document.getSelection();
      const text = selection.anchorNode.data;
      const parent = selection.baseNode.parentNode;
      const position = selection.focusOffset;

          const html = [
            text.slice(0, position),
            createdElementSpan.outerHTML,
            text.slice(position),
          ].join('');

          parent.innerHTML = html;

似乎可行，outerHTML 属性返回字符串。但也必须弄清楚如何将光标放在正确的位置

【讨论】：