Question

我经常尝试并创建HTML模板（空白，画布，应用程序等），每次我的代码都有点令人沮丧。我可以在Notepad ++中为各种模板创建宏，但手动执行此操作并不那么有效。由于我已经在shortcuts.xml文件中找到了如何保存宏的方式，因此采用以下格式：

<NotepadPlus>
    <InternalCommands>
        <Shortcut id="42023" Ctrl="yes" Alt="no" Shift="yes" Key="81" />
    </InternalCommands>
    <Macros>
        <Macro name="Blank HTML5" Ctrl="no" Alt="no" Shift="no" Key="0">
            <Action type="1" message="2170" wParam="0" lParam="0" sParam="&lt;" />
            <Action type="1" message="2170" wParam="0" lParam="0" sParam="!" />
            <Action type="1" message="2170" wParam="0" lParam="0" sParam="D" />
            <Action type="1" message="2170" wParam="0" lParam="0" sParam="O" />
            <Action type="1" message="2170" wParam="0" lParam="0" sParam="C" />

我考虑过以编程方式创建模板，这就是我提出的：jsfiddle

＆＃13;

var inputBox = document.getElementById("input");
var outputBox = document.getElementById("output");
var convertButton = document.getElementById("convert");

var dict = [
  [/</, "&lt;"],
  [/>/, "&gt;"],
  [/\r/, "&#x000D;"],
  [/\n/, "&#x000A;"],
];

convertButton.onclick = function convertTextToMacro() {
  var chars = inputBox.value.split("");
  var macro = '<Macro name="" Ctrl="no" Alt="no" Shift="no" Key="0">\r\n';
  for (var i = 0; i < chars.length; i++) {
    var c = chars[i];
    for (var j = 0; j < dict.length; j++) {
      c = c.replace(dict[j][0], dict[j][1]);
    }
    macro += '    <Action type="1" message="2170" wParam="0" lParam="0" sParam="' + c + '">\r\n';
  }
  macro += '</Macro>';
  outputBox.value = macro;
};

＆＃13;

* {
  margin: 0;
  padding: 0
}

body {
  background: gainsboro;
}

#main {
  display: table;
  margin: 20px auto;
  background: rgb(250, 250, 250);
  padding: 20px;
  border: 1px solid darkgray;
  box-shadow: 0 0 2px rgba(0, 0, 0, .2);
}

textarea {
  padding: 5px;
  width: 600px;
  height: 300px;
  display: block;
  font-size: 13px;
  line-height: 1.5;
}

#input {
  height: 150px;
}

input {
  display: block;
  padding: 5px 10px;
  margin: 5px 0;
}

＆＃13;

<div id="main">
  <textarea id="input" placeholder="Input">
<html>
    <body></body>
</html>
  </textarea>
  <input type="button" id="convert" value="Create macro" />
  <textarea id="output" placeholder="Output"></textarea>
</div>

＆＃13;

有4个字符需要转义：

var dict = [
    [/</,   "&lt;"],
    [/>/,   "&gt;"],
    [/\r/,  "&#x000D;"],
    [/\n/,  "&#x000A;"],
];

我可以替换<，>和\n，但似乎无法替换\r。奇怪的是，这似乎只发生在这种特殊情况下。如果我省略\n

var dict = [
    [/</,   "&lt;"],
    [/>/,   "&gt;"],
    [/\r/,  "&#x000D;"],
    // [/\n/,  "&#x000A;"],
];

我得到了不同的输出：jsfiddle

在以下示例中：

var greet = "Hello\rWorld".replace(/\r/, "&#x000D;");
console.log(greet);  // "Hello&#x000D;World"

var chr = "\r".split("")[0].replace(/\r/, "&#x000D;");
console.log(chr);   // "&#x000D;"

\r已被替换。我做错了什么？

Answer 1

问题是你的textarea中实际上没有任何\ r \ n字符。

\r是一个回车符，\n是一个换行符。在Windows上，每个新行都由两个字符表示：\r\n在linux上它只是\n。

为避免您担心此问题，浏览器正在剥离\r，只留下\n。

您可以看到这种情况，因为您可以在运行代码之前重新添加\r个字符以与每个\n一起使用（这有点无意义，但显示其余代码很好）

 var inputBox = document.getElementById("input");
 var outputBox = document.getElementById("output");
 var convertButton = document.getElementById("convert");

 var dict = [
   [/</, "&lt;"],
   [/>/, "&gt;"],
   [/\r/, "&#x000D;"],
   [/\n/, "&#x000A;"]
 ];

 convertButton.onclick = function convertTextToMacro() {
   var value = inputBox.value.replace(/\n/g,'\r\n');
   var chars = value.split("");
   var macro = '<Macro name="" Ctrl="no" Alt="no" Shift="no" Key="0">\r\n';
   for (var i = 0; i < chars.length; i++) {
     var c = chars[i];
     for (var j = 0; j < dict.length; j++) {
       c = c.replace(dict[j][0], dict[j][1]);
     }
     macro += '    <Action type="1" message="2170" wParam="0" lParam="0" sParam="' + c + '">\r\n';
   }
   macro += '</Macro>';
   outputBox.value = macro;
 };

所以问题是你真的需要包含\r个字符吗？我不确定是否有文本框的解决方案。

我并非100％确定所有浏览器都这样做 - 所以在开始之前可能需要剥离它们以防var value = inputBox.value.replace(/\r/g,'');

Answer 2

尝试替换\r\n而不是\r

无法替换\ r \ n字符

2 个答案: