用户单击按钮后如何使文本变为粗体？

Question

我正在尝试用 JavaScript 制作一个文本编辑器，它具有各种功能，例如加粗文本和斜体以及其他一些功能。当用户单击其中任何一个时，他们选择的任何内容都将相应地进行编辑。现在我能够获取选定的文本，甚至在文本之前和之后放置强标签，但是当我这样做时，文本不会变粗，只会看到标签。如何使文本加粗？对不起，我无法提供代码，因为它太多太乱了。感谢阅读查询！另外，如果您知道任何可以帮助我解决此问题的 JavaScript 库，那么您可以向我推荐。

document.getElementById("button").addEventListener("click",
  () => {
    let text = document.getElementById("text").innerText
    let selection = window.getSelection();
    let boldText = "<strong>" + selection + "</strong>"
    document.getElementById("text").innerText = text.replace(selection, boldText)
  })

<div id="text">
  The dog barks and runs around.
</div>
<button id="button">Make selected text bold</button>

我使用内部文本而不是内部 html 来重现问题

Answer 1

您正在使用innerText 替换错误，因为我们要更改 html，因此请使用 innerHTML。 代码：

document.getElementById("button").addEventListener("click",
  () => {
    let text = document.getElementById("text").innerText
    let selection = window.getSelection();
    let boldText = "<b>" + selection + "</b>"
    document.getElementById("text").innerHTML = text.replace(selection, boldText) //use innerhtml instead of innertext
  })

<div id="text">
  The dog barks and runs around.
</div>
<button id="button">Make selected text bold</button>

Answer 2

这是我用来更改按钮单击时输入文本的一些代码

<input type="text" id="sign" value="">
<p style = "font-family: 'Dancing Script', cursive; font-size:50px;" 
id="signOutput"></p>
<button onclick="signFunction()">Output Signature</button>

<script>

function signFunction() {var x = document.getElementById("sign").value;
         document.getElementById("signOutput").innerHTML = x;
         }

</script>