无法使用\ n插入换行符

时间:2018-11-30 14:27:33

标签: javascript regex

在下面的简化示例中,用户无论在输入框中输入的内容都是字符串“ quis”。 我也希望能够从输入框中插入换行符。

因此,如果用户输入类似 “ blabla \ nbla” 结果应为

“ blabla

bla “

我不想使用

这样的HTML标签

function replace_with(e) {
  var replacement = document.getElementById('replaceWith').value;
  var text = document.getElementById('val');
  var reg = new RegExp("quis", "g");
  text.innerHTML = globalString.replace(reg,replacement);
}

document.getElementById('replaceWith').addEventListener('keyup', replace_with);

var globalString = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
#val{
  border: 1px solid grey;
  padding: 5px;
}
.input{
    border: 1px solid grey;
  padding: 5px;
  margin-bottom: 10px;
}
<input type="text" spellcheck="false" class="input" id="replaceWith">
 
<div id="val" contenteditable="true" spellcheck="false">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

2 个答案:

答案 0 :(得分:1)

<br>而不是\n放入innerHTML以获得换行符

答案 1 :(得分:1)

转义换行符,因为\ n仅在文本内起作用。 由于您替换了HTML标签的内容,因此,如果文本需要转到下一行,则应使用<br>,或者使用<br><br>两次以使两者之间留空。