Javascript选择文本并设置textarea格式

Question

我试图允许用户在注释系统（可怜的人的文本编辑器）中使用的textarea中进行简单的文本格式设置。 希望允许他们使用光标选择文本，然后单击按钮进行格式化。 我的问题是我如何获取JavaScript来抓取并返回所选文本。 想象一下它应该是这样的：

<script>
function formatText(field) {
//gets text
var text;
text = field.value.substring(field.selectionStart, field.selectionEnd);
//formats it
var text = '<b'>+text+'</b>';
//returns it
field.value.substring(field.selectionStart, field.selectionEnd); = text;
}
</script>

<body>
<textarea id="field"></textarea><button onclick="formatText('field')">Make bold</button>
</body>

更新：以下代码获取选定的文本，对其进行格式化，然后将其发送回textarea，但是，它将替换textarea中的所有文本...所以我只需要一种方法来替换textarea中的选定文本，而不是全部-将完成：

<head>
    <script type="text/javascript">
        function GetSelection () {
            var selection = "";

            var textarea = document.getElementById("field");
            if ('selectionStart' in textarea) {
                    // check whether some text is selected in the textarea
                if (textarea.selectionStart != textarea.selectionEnd) {
                    selection = textarea.value.substring  (textarea.selectionStart, 

textarea.selectionEnd);
                }
            }
            else {  // Internet Explorer before version 9
                    // create a range from the current selection
                var textRange = document.selection.createRange ();
                    // check whether the selection is within the textarea
                var rangeParent = textRange.parentElement ();
                if (rangeParent === textarea) {
                    selection = textRange.text;

                }
            }

            if (selection == "") {
                alert ("No text is selected.");
            }
            else {
                selection = "<b>"+selection+"</b>";
        document.getElementById('field').value = selection;

            }
        }
    </script>
</head>
<body>
    <textarea id="field" spellcheck="false">Select some text within this field.</textarea>
    <button onclick="GetSelection ()">Get the current selection</button>
</body>

我认为有一种方法可以指定document.getElementByID.value.substr，但我不知道语法。

Answer 1

它是：穷人的文本编辑器。 使用应用于文本区域中的文本的SelectionStart和SelectionEnd获得所选文本。 然后，在重新格式化后，将文本区域文本从三部分放在一起，分别是选择文本，选择文本和选择文本之后。 使用document.getElementById（'textareaid'）。value =组合文本放回textarea。

<html>
<head><script>
function format () {
    // code for IE
    var textarea = document.getElementById("textarea");

    if (document.selection)
    {
    textarea.focus();
    var sel = document.selection.createRange();
    // alert the selected text in textarea
    alert(sel.text);

    // Finally replace the value of the selected text with this new replacement one
    sel.text = '<b>' + sel.text + '</b>';
    }

    // code for Mozilla

    var textarea = document.getElementById("textarea");

    var len = textarea.value.length;
    var start = textarea.selectionStart;
    var end = textarea.selectionEnd;
    var sel = textarea.value.substring(start, end);

    // This is the selected text and alert it
//    alert(sel);

    var replace = '<b>' + sel + '</b>';

    // Here we are replacing the selected text with this one
    textarea.value = textarea.value.substring(0,start) + replace + textarea.value.substring(end,len);

var formatted = textarea.value;
document.getElementById('field').value = formatted;
}

</script></head>
<body>
<textarea id="textarea">One two three four five six seven eight</textarea><button onclick="format 

()">Format selected text</button>
</body>
</html>

Answer 2

您的代码中存在以下问题：

var text

每行必须以;结尾;

<button onclick="formatText("field")">

以引号开头必须以引号结尾，如果您需要用引号括起来，即对于诸如“这是我要处理的文字”之类的字符串，则其中的那些引号必须为单引号

onclick="formatText('field')"

text = field.value.substring(field.selectionStart, field.selectionEnd);

代码正在将字符串传递给该函数，该函数没有值property \\ method。 我们需要文本字段中的文本，因此我们使用通过document.getElementById('field')保存它的“元素”

然后，我们只需设置样式即可完成操作的元素。

如果您需要替换文本，只需将值分配给

document.getElementById('field').value = ...

这是一个例子..

<script type="text/javascript" >
  function formatText() {
      //gets text
      //text = document.getElementById('field').value;
      //formats it
      document.getElementById('field').style.fontWeight = "bold";
  }
</script>

</head>
<body>
<textarea id="field"></textarea><button onclick="formatText()">Make bold</button>
</body>

在这里检查http://jsfiddle.net/YcpUs/

Javascript选择文本并设置textarea格式

问题描述

2 个解决方案

解决方案1
1 2012-05-03 02:06:55

解决方案2
0 2012-05-02 16:00:14

Javascript选择文本并设置textarea格式

问题描述

2 个解决方案

解决方案1 1 2012-05-03 02:06:55

解决方案2 0 2012-05-02 16:00:14

解决方案1
1 2012-05-03 02:06:55

解决方案2
0 2012-05-02 16:00:14