在 HTML 输入中的文本周围动态包裹元素

如何解决在 HTML 输入中的文本周围动态包裹元素

我正在构建一个笔记应用程序。我有一个 <td contenteditable="true"> 作为输入，您可以在其中输入文本。我想在按下 Enter 键时将 CSS 样式应用于特定的文本行，大概是通过将 html 元素包裹在所需文本周围并在 CSS 中定位它们的类。我需要能够对单个输入框中的多行执行多次此操作。

我已经尝试了以下

const element = document.querySelector('td'); 
const wrapped = `<p class="x">${element.innerHTML}</p>`;
element.innerHTML = wrapped;

但这只能执行一次，执行两次会导致第一个包裹被第二个包裹，即 ${text}。我需要元素相邻而不是嵌套，因为每行都有自己的自定义样式，例如 ${text1}{text2}

我也尝试附加元素而不是将其设置为innerHTML，这几乎可以工作，但最终每次都将光标置于输入的开头，这是不可接受的，因为用户需要能够连续输入新行。

解决方法

您可以参考this question。

将第三行改为element.innerHTML += wrapped;

要在 JavaScript 中附加某些内容，您需要使用加号来连接字符串或变量。

<script>
const element = document.querySelector('td'); 
const wrapped = `<p class="x">${element.innerHTML}</p>`;
element.innerHTML += wrapped;
</script>