使用格式化控件构建 textarea - 如何获取选定的文本答案

【问题标题】：Build textarea with formatting controls - how to get selected text使用格式化控件构建 textarea - 如何获取选定的文本
【发布时间】：2012-10-21 09:43:39
【问题描述】：

只是为了好玩，我想为 textarea 构建简单的文本格式化工具。首先，如果要采用粗体格式（就像stackoverflow的textarea编辑器一样），我希望能够用**将突出显示的文本括在textarea中。我编写了以下代码，大部分时间都可以运行，但它确实有一个错误，我稍后会解释。

<html>
<head>
<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script type="text/javascript" language="javascript">
var tmpText = '';
$(document).ready(function(){
        tmpText = '';
        $('#btn_bold').click(function(){bold(tmpText);});
        $('textarea').bind('mouseup', function(){
                  tmpText = '';
                  if(window.getSelection){
                    tmpText = window.getSelection().toString();
                  }else if(document.getSelection){
                    tmpText = document.getSelection().toString();
                  }else if(document.selection){
                    tmpText = document.selection.createRange().text;
                  }
        });
});

function bold(str)
{
        $('textarea').val($('textarea').val().replace(str,'**'+str+'**'));
}
</script>
</head>
<body>
<button type="button" id="btn_bold">bold it</button>
<textarea>AA</textarea>
</body>
</html>

因此，如果您突出显示第一个字母 A 并将其加粗，您将得到结果 **A**A。但是，如果您突出显示第二个字母 A 并将其加粗，您仍然会得到 **A**A，而不是 A**A**，因为代码行 $('textarea').val($('textarea').val().replace(str,'**'+str+'**')); 不足以识别要加粗的字母 A。

识别高亮文本并将其加粗的有效方法是什么？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

我写了一个jQuery plug-in that does this，如果有帮助，我可以将其提取到一个独立的脚本中。使用插件将所选文本替换为单词“hello”的示例。

<html>
<head>
<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script type="text/javascript" language="javascript" src="http://rangyinputs.googlecode.com/files/textinputs_jquery.js"></script>
<script type="text/javascript" language="javascript">

$(document).ready(function() {

        $('textarea').bind('mouseup',function() { $(this).replaceSelectedText('hello');});
});
</script>
</head>
<body>
<textarea style="width:300px; height:300px;">
AAA
</textarea>
</body>
</html>

另外，as I commented in a related question of yours，您拥有的功能不适用于 textareas，它有一个单独的机制来处理选择。在那里查看我的答案以获得可行的功能。

【讨论】：

我正在试用你的插件。你能告诉我几行关于如何实例化你的对象和使用 replaceSelectedText() 函数的 jquery 代码吗？

【解决方案2】：

如果您在其上调用 tostring()，则选择对象将返回该字符串。您还可以获取范围对象，其中包含有关起点和终点的更多信息。

https://developer.mozilla.org/en/DOM/Selection

和

http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html

【讨论】：

【解决方案3】：

正如here 演示的那样，您可以这样做：

el = document.getElementById('texty');
  if (el.setSelectionRange) {

     el.value = el.value.substring(0,el.selectionStart) + "**" + el.value.substring(el.selectionStart,el.selectionEnd) + "**" + el.value.substring(el.selectionEnd,el.value.length);

  }
  else if(document.selection.createRange()) {
      document.selection.createRange().text = "**" + document.selection.createRange().text + "**"; 
  }

但请注意，此方法仅限于 textareas。

【讨论】：

【解决方案4】：

 <head>
 <script type="text/javascript">
    function formatText(el,tagstart,tagend) {
      if (el.setSelectionRange) {
        el.value = el.value.substring(0,el.selectionStart) + tagstart +
        el.value.substring(el.selectionStart,el.selectionEnd) + tagend +
        el.value.substring(el.selectionEnd,el.value.length)
      } else {
        // IE code 
        var selectedText = document.selection.createRange().text;
        var tag="b"
        if (selectedText != "") {
          var newText = "<" + tag + ">" + selectedText + "</" + tag + ">";
          document.selection.createRange().text = newText;
        }
      }
    }
</head>
<body>
  <p> <textarea rows="30" cols="59" name="Write-my-life-moments" 
       id="write-my-life- moments"></textarea> </p>

  <input type="button" value="BOLD"  
     onclick="formatText(document.getElementById('write-my-life-moments'), 
     '<b>','</b>')" />
</body>

此代码适用于 FF、IE(6)>、Opera 9>、Safari。我在这些浏览器上对其进行了测试。不在旧的。所以请在旧浏览器上检查这个。我没有时间在旧浏览器上检查它（它不显示我的文本区域开始标记 y？我不知道，所以请自己 dd。write-my-life-moments。它是文本区域的名称）`

【讨论】：

我看不出这个 javascript 是如何正常工作的。存在语法错误（缺少分号）。