I'm currently writing a utility in pure JS (no jQuery) that performs string replacements on a given input text: It looks for occurences of a string and replaces them with another. To that end, I want to allow the user to specify the desired replacement string inside an <input> element.
However, if the user inputs special characters, such as line break (\n) or tab stop (\t), these will not be interpreted as actual line breaks or tab stops, but rather as literal strings "\n" and "\t".
Here's my code in a nutshell to clarify the problem:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
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;
alert(inputStr.replace(regExp, replacementStr));
}
</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>
Expected output:
Apples
pears
De facto output:
Apples\npears
Neither escaping (e.g. "\\n"), nor feeding the input to a String object ( replacementStr = new String(replacementStr) ) will do anything.
Some help would be much appreciated!
Normal input fields don't allow newlines and their values aren't evaluated in any way, which means that if the user enters \n, nothing will convert it into a newline.
You can just replace the required escape codes manually:
replacementStr = replacementStr.replace(/\\n/g, '\n')