Javascript选择文本并格式化textarea
Posted
技术标签:
【中文标题】Javascript选择文本并格式化textarea【英文标题】：Javascript select text and format textarea 【发布时间】：2012-05-12 03:14:14 【问题描述】：我试图让用户在评论系统（穷人的文本编辑器）中使用的 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 可能会这样做，但我不知道语法。
【问题讨论】：
如果您希望其他人帮助您，您可能希望接受您的问题的答案。 【参考方案1】：这里是：穷人的文本编辑器。使用应用于 textarea 中的文本的 SelectionStart 和 SelectionEnd 来获取选定的文本。然后在重新格式化之后，将 textarea 文本从三个部分重新组合在一起，分别是选择文本之前、选择文本和选择文本之后。使用 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>
【讨论】：
【参考方案2】：在您的代码中存在以下问题：
var text
每一行必须以;结尾
<button onclick="formatText("field")">
开始引用必须以引号结尾，如果你需要在引号内，即对于像“这是我要处理的文本”这样的字符串，那么里面的那些引号需要是单引号
onclick="formatText('field')"
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/
【讨论】：
谢谢！这是格式化整个 textarea 的好方法。我使用 getElementById 为我的非工作示例建模。但是，有没有办法让您在文本区域内使用光标选择文本，即。懒狗，粗体“懒惰”？我在这个链接找到了 field.selectionStart 和 field.selectionEnd 方法：(***.com/questions/275761/…)以上是关于Javascript选择文本并格式化textarea的主要内容，如果未能解决你的问题，请参考以下文章
Android 3.x 仅 WebView 文本选择 + JavaScript
如何使用 Javascript 获取选定文本中的所有 HTML 选择标签？
通过javascript或jquery从输入框中获取包含月-日期格式的值