文本选择和替换在文本区域中无法正常工作

Question

我正在尝试使用 [=45= 为 textarea 标签的选定文本 (md and/or html) 制作用于格式化的按钮（如粗体、斜体等） ].

有时它可以工作，有时它没有任何错误。

代码link https://jsfiddle.net/3gn75zLb

JS代码

function formatText(style) {
    var textarea_editor = document.getElementById('md-code');

    //get Selection
    var index_start = textarea_editor.selectionStart;
    var index_end = textarea_editor.selectionEnd;
    var text = textarea_editor.value;
    var selectedText = text.substring(index_start, index_end);
    var formatedText = selectedText;

    
        //format
        switch(style.toLowerCase()) {
            case 'b':
                var formatedText = "**"+selectedText+"**";
                break;

            case 'i':
                var formatedText = "*"+selectedText+"*";
                break;

            case 'u':
                var formatedText = "<u>"+selectedText+"</u>";
                break;

            case 'sup':
                var formatedText = "<sup>"+selectedText+"</sup>";
                break;

            case 'sub':
                var formatedText = "<sub>"+selectedText+"</sub>";
                break;

            case 'img':
                var formatedText = "![]("+selectedText+")";
                break;

            default:
                var formatedText = selectedText;
                break;
        }

        textarea_editor.innerHTML = text.substring(0, index_start)+formatedText+text.substring(index_end, text.length);
    }

有按钮关联的点击事件调用formatText()函数

喜欢

formatText('b') to enclose the selected text with ** to make it bold in markdown.

问题

代码有问题吗？
有没有 better/easy 方法可以使用 jQuery 或其他任何方法来做到这一点？

Answer 1

问题是你在设置textarea的innerHTML，你需要设置value 属性的文本区域。

innerHTML with text area 只能用于设置文本区域的初始内容但是一旦你在textarea中输入内容，innerHTML就不会了任何东西，你需要然后使用 value 属性.

此外，目前如果没有选择文本，即使代码添加了样式，如果 selectedText 为空，您可以简单地从函数中 return。

查看下面的代码：

function formatText(style) {
  var textarea_editor = document.getElementById('md-code');
  
  //get Selection
  var index_start = textarea_editor.selectionStart;
  var index_end = textarea_editor.selectionEnd;
  var text = textarea_editor.value;
  var selectedText = text.substring(index_start, index_end);
  var formatedText = selectedText;
  
  if (!selectedText) return;
  
  //format
  switch (style.toLowerCase()) {
    case 'b':
      var formatedText = "**" + selectedText + "**";
      break;

    case 'i':
      var formatedText = "*" + selectedText + "*";
      break;

    case 'u':
      var formatedText = "<u>" + selectedText + "</u>";
      break;

    case 'sup':
      var formatedText = "<sup>" + selectedText + "</sup>";
      break;

    case 'sub':
      var formatedText = "<sub>" + selectedText + "</sub>";
      break;

    case 'img':
      var formatedText = "![](" + selectedText + ")";
      break;

    default:
      var formatedText = selectedText;
      break;
  }

  textarea_editor.value = text.substring(0, index_start) + formatedText + text.substring(index_end, text.length);
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

<div class="jumbotron bg-white px-2 py-0 m-0">
  <div class="my-2">
    <button type="button" class="btn btn-outline-secondary" onclick="formatText('b')"><b>B</b></button>
    <button type="button" class="btn btn-outline-secondary" onclick="formatText('i')"><i>I</i></button>
    <button type="button" class="btn btn-outline-secondary" onclick="formatText('u')"><u>U</u></button>
    <button type="button" class="btn btn-outline-secondary" onclick="formatText('sup')">T<sup>abc</sup></button>
    <button type="button" class="btn btn-outline-secondary" onclick="formatText('sub')">T<sub>abc</sub></button>
    <button type="button" class="btn btn-outline-secondary" onclick="formatText('img')">Img</button>
  </div>
  <textarea id="md-code" class="form-control" rows="20" name="note_content" placeholder="Markdown and/or HTML text"></textarea>
</div>

文本选择和替换在文本区域中无法正常工作

Text selection and replacement not working properly in textarea

html

javascript

text

replace

textarea