即使有换行符捕获光标位置中的所有内容,也将特殊标签应用于所有选定文本中的文本区域

Posted

技术标签:

【中文标题】即使有换行符捕获光标位置中的所有内容,也将特殊标签应用于所有选定文本中的文本区域【英文标题】:Apply special tags to textarea in all selected text even if there are newline capturing all contents in cursor poisition 【发布时间】:2013-09-29 10:51:01 【问题描述】:

下面的示例将标记 [code] 和 [/code] 写入 textarea 中的选定文本,但仅应用于字符串的开头和结尾...我想要 [code] 和 [/code] 应用于将换行符视为新字符串的字符串的每个部分...

发布的示例执行:

[code]test
test
test[/code]

我想申请:

blablabla...
[code]test[/code]
[code]miao miao[/code]
[code]this is teh 3rd string[/code] 
etcetera, some extra string

如您所见,我想应用代码仅选定的字符串,考虑使用换行符的新字符串...在纯 javascript 中可能吗?没有 jquery 或 mootools,请仅使用独立脚本...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  <title>[javascript code]</title>
  <script language="JavaScript" type="text/javascript">
    var myValueBefore = "[code]";
    var myValueAfter = "[/code]";
    function applyCode(myField, myValueBefore, myValueAfter) 
      if (document.selection) 
        myField.focus();
        document.selection.createRange().text = myValueBefore + document.selection.createRange().text + myValueAfter;
       else if (myField.selectionStart || myField.selectionStart == '0') 
        var startPos = myField.selectionStart;
        var endPos = myField.selectionEnd;
        myField.value = myField.value.substring(0, startPos)+ myValueBefore+ myField.value.substring(startPos, endPos)+ myValueAfter+ myField.value.substring(endPos, myField.value.length);
       
    
  </script>
</head>

<body>

<br><br><br>
<table align="center" border="0" cellpadding="15" cellspacing="0" >
  <tr>
    <td>
      <form action="#" method="post">
      <input type="button" value="Apply Code" onclick="javascript:applyCode(test, myValueBefore, myValueAfter);"><br>
      <textarea rows="5" cols="130" name="test"></textarea>
      </form>
    </td>
  </tr>
</table>

</body>

</html>

【问题讨论】:

【参考方案1】:

你可以进一步开发这个coden-p:

var myValueBefore = '[code]',
    myValueAfter = '[/code]';
function applyCode(myField, myValueBefore, myValueAfter) 
    var newLine = new RegExp('\n|\r\n', 'g'), range, selectedText, beforeSelectedText, afterSelectedText;
    if (document.selection) 
        range = document.selection.createRange();
        range.text = myValueBefore + range.text.replace(newLine, myValueAfter + '\n' + myValueBefore) + myValueAfter;
        return;
     else 
        beforeSelectedText = myField.value.substring(0, myField.selectionStart);
        afterSelectedText = myField.value.substr(myField.selectionEnd);
        selectedText = myField.value.substring(myField.selectionStart, myField.selectionEnd);
        myField.value = beforeSelectedText + myValueBefore + selectedText.replace(newLine, myValueAfter + '\n' + myValueBefore) + myValueAfter + afterSelectedText;
    
    return;

A live demo at jsFddle.

【讨论】:

我在IE8下遇到问题,在IE8下有两个换行符而不是一个,如何修复IE? @user1582059 对不起,我无法重现这个问题,虽然我只能用 IE10 模拟 IE8。您可以尝试将 '\r\n' 作为 RegExp 参数。 我错了...问题是 IE...不是很重要的版本,因为我在 Windows 7 上尝试使用 IE 10.00 并且问题仍然存在...所以我该如何解决IE问题? IE 增加了两个换行符而不是一个...这并不冗长... @user1582059 现在我明白了:)。看起来 IE 在textarea 中也使用了\r\n。我已经更新了我的答案。 感谢您修复 IE 问题 :)

以上是关于即使有换行符捕获光标位置中的所有内容,也将特殊标签应用于所有选定文本中的文本区域的主要内容,如果未能解决你的问题,请参考以下文章

php正则,去掉除html标签外的所有空格/换行符等特殊字符?注:html标签内可能会有属性

echo -n和-e

[shell基础]——echo命令

不换行输出的两种方式

把记事本里所有的空格替换为换行怎么弄的?

即使选项卡按钮无法立即访问该屏幕,也将选项卡栏添加到所有屏幕