选择文本并使用 JavaScript 设置“文本区域”的格式

Select text and format a 'textarea' using JavaScript

本文关键字：文本 文本区域 区域 格式 设置 JavaScript 选择      更新时间：2023-09-26

我试图允许用户在注释系统（穷人的文本编辑器）中使用的文本区域中对文本进行简单的格式化。我想允许他们用光标选择文本，然后单击一个按钮来格式化它。 如何让 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>

以下代码获取所选文本，设置其格式，然后将其发送回文本区域 - 但是，它会替换文本区域中的所有文本...所以我只需要替换文本区域中的选定文本 - 而不是全部 - 我就会完成：

<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 这可能会做到这一点，但我不知道语法。

这是：一个穷人的文本编辑器。它使用应用于文本区域中文本的 SelectionStart 和 SelectionEnd 来获取所选文本。

然后，重新

格式化后，它将文本区域文本从三个部分重新放在一起，在选择文本之前，所选文本和选择文本之后。它使用 document.getElementById（'textareaid'）.value = 汇编文本将其放回文本区域。

<html>
<head>
    <script>
        function format () {
            // Code for Internet Explorer
            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 Firefox
            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>

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

  1. var text

    每行必须以;结尾

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

    引号开头必须以引号结尾。如果你需要引号，即，对于像"这是我要处理的文本"这样的字符串，那么里面的引号必须是单引号

    onclick="formatText('field')"

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

    代码将字符串传递给函数，该函数没有值属性''方法。 我们希望文本字段中的文本，因此我们使用使用 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/检查一下。

相关文章：