纯JS工具中如何解析输入框的\n\t等特殊字符为实际控制字符

嘿，我完全懂你碰到的这个麻烦！当用户在输入框里输入\n的时候，浏览器只会把它当作普通的两个字符（反斜杠加上字母n），而不是你想要的换行符。咱们来一步步解决这个问题：

问题根源 #

<input>元素的value属性获取到的是纯文本内容，所有的转义序列都会被当作字面量处理，不会自动解析成对应的控制字符。所以你看到的Apples\npears就是因为\n被直接当成了字符串的一部分，而不是换行。

解决方案：手动解析转义字符 #

我们可以写一个小函数，把用户输入里的字面量转义序列转换成实际的控制字符。比如处理\n、\t、\\这些最常用的：

第一步：添加转义解析函数 #

function parseEscapeCharacters(str) {
  // 把字面量的 \\n 替换成实际换行符
  return str.replace(/\\n/g, '\n')
            // 把字面量的 \\t 替换成实际制表符
            .replace(/\\t/g, '\t')
            // 把字面量的 \\\\ 替换成单个反斜杠（处理用户输入的\\）
            .replace(/\\\\/g, '\\');
  // 如果需要支持更多转义字符，比如\r、\b，继续在这里添加replace规则即可
}

第二步：修改你的run函数 #

在使用替换字符串之前，先调用这个解析函数：

function run() {
  var inputStr = document.getElementById("inputStr").value;
  var searchStr = document.getElementById("searchStr").value;
  var regExp = new RegExp(searchStr, "g");
  var replacementStr = document.getElementById("replacementStr").value;
  
  // 关键：解析用户输入的转义字符
  var parsedReplacement = parseEscapeCharacters(replacementStr);
  
  alert(inputStr.replace(regExp, parsedReplacement));
}

完整测试代码 #

把这些整合到你的HTML里，就可以得到预期效果了：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function parseEscapeCharacters(str) {
  return str.replace(/\\n/g, '\n')
            .replace(/\\t/g, '\t')
            .replace(/\\\\/g, '\\');
}

function run() {
  var inputStr = document.getElementById("inputStr").value;
  var searchStr = document.getElementById("searchStr").value;
  var regExp = new RegExp(searchStr, "g");
  var replacementStr = document.getElementById("replacementStr").value;
  var parsedReplacement = parseEscapeCharacters(replacementStr);
  alert(inputStr.replace(regExp, parsedReplacement));
}
</script>
</head>
<body>
<label>Input string:</label>
<input id="inputStr" type="text" value="Apples and pears"><br>
<label>Look for this:</label>
<input id="searchStr" type="text" value=" and "><br>
<label>Replace with this:</label>
<input id="replacementStr" type="text" value="\n"><br>
<button onclick="run()">Go!</button>
</body>
</html>

现在点击按钮，就能看到预期的换行效果啦！如果需要支持更多转义字符，只需要在parseEscapeCharacters函数里添加对应的替换规则就行。

内容的提问来源于stack exchange，提问作者ParaDice