创建基本文本编辑器时如何在javascript中加粗选定区域？答案

【问题标题】：How to bold a selected area in javascript while creating a basic text editor?创建基本文本编辑器时如何在javascript中加粗选定区域？
【发布时间】：2021-06-14 03:21:33
【问题描述】：

我正在尝试使用 Rxjs 和 javascript 创建基本的文本编辑器。我在 .html 文件中创建了一个名为“B”的按钮，单击该按钮会使 textarea 中的选定文本变为粗体。如何在下面的粗体内容（）函数中使用 javascript 为 textarea 中的选定文本设置样式？另外，如果选定的文本完全是粗体，那么如何使粗体按钮自动选中？

我知道这是非常基本的疑问，但我是 javascript 的初学者。如果有人能帮助我理解这一点，那就太好了。



let btnbold=document.getElementById('btnbold');
let textarea=document.getElementById('text_area_id');


fromEvent(btnbold,'click').subscribe(()=>boldcontent());

let boldcontent=()=>{
let selection = (textarea.value).substring(textarea.selectionStart,textarea.selectionEnd);


}```

【问题讨论】：

stackoverflow.com/a/4705882/262708
我假设您正在使用 textarea 控件来创建您的编辑器？如果您要使用常规 div，请查看以下内容。 stackoverflow.com/questions/20880271/…。 btn.onclick = () => { document.execCommand('bold'); }

标签： javascript html css rxjs textarea

【解决方案1】：

让我们专注于改变文本并将 rxjs 放在一边。在您的boldcontent 中，您有：

let selection = textarea.value.substring(
  textarea.selectionStart,
  textarea.selectionEnd,
);

但这仅包含选定的文本。您真正想要做的是用两个星号** 括起来的选定部分替换textarea 中的整个文本（这里给定markdown 是您的首选方法）：

  const {value, selectionStart, selectionEnd} = textarea;
  const newValue =
        value.slice(0, selectionStart) + // (1) 
        "**" + 
        value.slice(selectionStart, selectionEnd) + // (2)
        "**" +
        value.slice(selectionEnd, value.length); // (3)
  textarea.value = newValue;

(1) 这将获取所选文本之前的子字符串

(2)这是选中的文字

(3)这是选择后剩余的子串

但是，这是一个非常有限的示例，远未准备好投入生产。正确的实现还可以确保每个** 都有一个相应的结束标记。部分选择的粗体文本应与新选择等正确合并...要涵盖所有这些边缘情况，您可以在 SO 上创建新问题。

【讨论】：