如何使用javascript将标签添加到选定的文本

时间:2013-10-15 05:47:49

标签: javascript html

我正在尝试为所选文字添加标记。

我有一个textarea,里面我输入了一些文字。 因此,当我从文本区域中选择一些文本并单击代码按钮时,它应该添加< code> < /代码>所选文字的标签......

为此我使用了这段代码:

代码:

<html>
<head>
<script type="text/javascript">
    function formatText (tag) {
        var selectedText = document.selection.createRange().text;

        if (selectedText != "") {
            var newText = "<" + tag + ">" + selectedText + "</" + tag + ">";
            document.selection.createRange().text = newText;
        }
    }
</script>
</head>
<body>

<form name="my_form">
    <div id="tarea">askfashfkja;f</div><br />
    <input type="button" value="code" onclick="formatText ('code');" />
</form> 
</body>
</html>

但这不起作用......我怎么能这样做?

1 个答案:

答案 0 :(得分:1)

尝试此示例中的函数:

<script type="text/javascript">
// Function to add <tag>To Selected text</tag> in textarea with id of idelm
// Receives the tag name, and the id of textarea.
// Returns the selected text, with tag
function addTagSel(tag, idelm) {
  // http://CoursesWeb.net/javascript/
  var tag_type = new Array('<', '>');        // for BBCode tag, replace with:  new Array('[', ']');
  var txta = document.getElementById(idelm);
  var start = tag_type[0] + tag + tag_type[1];
  var end = tag_type[0] +'/'+ tag +  tag_type[1];
  var IE = /*@cc_on!@*/false;    // this variable is false in all browsers, except IE

  if (IE) {
    var r = document.selection.createRange();
    var tr = txta.createTextRange();
    var tr2 = tr.duplicate();
    tr2.moveToBookmark(r.getBookmark());
    tr.setEndPoint('EndToStart',tr2);
    var tag_seltxt = start + r.text + end;
    var the_start = txta.value.replace(/[\r\n]/g,'.').indexOf(r.text.replace(/[\r\n]/g,'.'),tr.text.length);
    txta.value = txta.value.substring(0, the_start) + tag_seltxt + txta.value.substring(the_start + tag_seltxt.length, txta.value.length);

    var pos = txta.value.length - end.length;    // Sets location for cursor position
    tr.collapse(true);
    tr.moveEnd('character', pos);        // start position
    tr.moveStart('character', pos);        // end position
    tr.select();                 // selects the zone
  }
  else if (txta.selectionStart || txta.selectionStart == "0") {
    var startPos = txta.selectionStart;
    var endPos = txta.selectionEnd;
    var tag_seltxt = start + txta.value.substring(startPos, endPos) + end;
    txta.value = txta.value.substring(0, startPos) + tag_seltxt + txta.value.substring(endPos, txta.value.length);

    // Place the cursor between formats in #txta
    txta.setSelectionRange((endPos+start.length),(endPos+start.length));
    txta.focus();
  }
  return tag_seltxt;
}
</script>

<form name="my_form">
    <textarea name="my_textarea" id="my_textarea">Sometext, abcd ... xyz, 123.</textarea><br />
    <input type="button" value="code" onclick="addTagSel('tag', 'my_textarea');" />
</form>