如何将新行/回车插入到element.textContent中？
如何将新行/回车插入到element.textContent中？
提问于 2018-06-12 10:46:39
假设我想动态地创建一个新的DOM元素并用JS字符串文字填充textContent / innerText。 字符串很长，我想把它分成三个部分：
var h1 = document.createElement("h1");
h1.textContent = "This is a very long string and I would like to insert a carriage return HERE...
moreover, I would like to insert another carriage return HERE...
so this text will display in a new line";
问题是，如果我写
h1.textContent = "...I would like to insert a carriage return here... \n";
它不起作用，可能是因为浏览器认为'\ n'是纯文本并将其显示为（\ r也不起作用）。
另一方面，我可以改变h1.innerHTML而不是textContent并写入：
h1.innerHTML = "...I would like to insert a carriage return here...<br />";
这里<br />会完成这项工作，但这样做不仅会取代文本内容，还会取代我的h1的所有HTML内容，而这并不是我想要的。
有没有简单的方法来解决我的问题？
回答 2
Stack Overflow用户
发布于 2018-06-12 18:53:31
我刚才遇到了这个问题。我发现一个好的解决方案是使用回车符的ASCII表示（代码13）。JavaScript有一个方便的功能String.fromCharCode()，它可以生成ASCII码的字符串版本，或者用逗号分隔多个代码。在我的情况下，我需要从一个长字符串生成一个CSV文件并将其写入文本区域。我需要能够从文本区域中剪切文本并将其保存到记事本中。当我尝试使用该<br />方法时，它不会保留回车，但是，使用fromCharCode方法时，它确实保留了回报。看到我的代码如下：
h1.innerHTML += "...I would like to insert a carriage return here..." + String.fromCharCode(13);
h1.innerHTML += "Ant the other line here..." + String.fromCharCode(13);
h1.innerHTML += "And so on..." + String.fromCharCode(13);
h1.innerHTML += "This prints hello: " + String.fromCharCode(72,69,76,76,79);
有关此方法的更多详细信息，请参阅此处：w3Schools-fromCharCode（）
Stack Overflow用户
发布于 2018-06-12 20:37:08
你可以使用正则表达式将'\ n'或'\ n \ r'字符替换为'<br />'。
你有这个：
var h1 = document.createElement("h1");
h1.textContent = "This is a very long string and I would like to insert a carriage return HERE...
moreover, I would like to insert another carriage return HERE...
so this text will display in a new line";
你可以像这样替换你的角色：
h1.innerHTML = h1.innerHTML.replace(/\n\r?/g, '<br />');
检查String和Regex对象的javascript参考：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100001376
复制相关文章
相似问题