如何用
元素替换字符串中的所有换行符?

2020/09/24 13:41 · javascript ·  · 0评论

如何使用JavaScript从值读取换行符并将所有换行符替换为<br />元素?

例:

从PHP传递的变量如下:

  "This is man.

     Man like dog.
     Man like to drink.

     Man is the king."

我希望我的结果在JavaScript转换后看起来像这样:

  "This is man<br /><br />Man like dog.<br />Man like to drink.<br /><br />Man is the king."

这会将所有退货转换为HTML

str = str.replace(/(?:\r\n|\r|\n)/g, '<br>');

如果您想知道什么?:的意思。它称为非捕获组。这意味着括号内的正则表达式组不会保存在内存中,以后再引用。您可以查看以下线程以获取更多信息:
https
: //stackoverflow.com/a/11530881/5042169 https://stackoverflow.com/a/36524555/5042169

如果您只想显示换行符,则可以使用CSS来实现。

<div style="white-space: pre-line">Some test
with linebreaks</div>

Jsfiddle:https://jsfiddle.net/5bvtL6do/2/

注意:请注意代码的格式和缩进,因为white-space: pre-line它将显示所有换行符(文本后的最后一个换行符除外,请参见小提琴)。

没有正则表达式:

str = str.split("\n").join("<br />");

这适用于来自文本区域的输入

str.replace(new RegExp('\r?\n','g'), '<br />');

如果接受的答案不适合您,则可以尝试。

str.replace(new RegExp('\n','g'), '<br />')

它为我工作。

无论系统如何:

my_multiline_text.replace(/$/mg,'<br>');

对其余文本进行编码也很重要,以防止可能的脚本注入攻击

function insertTextWithLineBreaks(text, targetElement) {
    var textWithNormalizedLineBreaks = text.replace('\r\n', '\n');
    var textParts = textWithNormalizedLineBreaks.split('\n');

    for (var i = 0; i < textParts.length; i++) {
        targetElement.appendChild(document.createTextNode(textParts[i]));
        if (i < textParts.length - 1) {
            targetElement.appendChild(document.createElement('br'));
        }
    }
}

当值来自TextBox时,这对我有用:

string.replace(/\n|\r\n|\r/g, '<br/>');

对于那些只想允许最高 <br>连续2 个,您可以使用以下命令:

let text = text.replace(/(\r?\n){2,}/g, '<br><br>');
text = text.replace(/(\r?\n)/g, '<br>');

第一行:在其中至少有两个连续的位置搜索\nOR 然后将其替换为2\r\n\n\n\n\nbr

第二行:搜索所有单个\r\n或,\n然后将其替换为<br>

如果您从PHP发送变量,则可以在发送之前通过以下方法获取它:

$string=nl2br($string);

它将所有新行替换为break

str = str.replace(/\n/g, '<br>')

如果要用单个中断线替换所有新行

str = str.replace(/\n*\n/g, '<br>')

了解有关Regex的更多信息:https : //dl.icewarp.com/online_help/203030104.htm
这将每次都为您提供帮助。

没有回答具体问题,但我相信这会帮助某人 ...

如果您有PHP的输出要使用JavaScript呈现在网页上(也许是Ajax请求的结果),并且只想保留空格和换行符,请考虑将文本放在一个<pre></pre>块内:

var text_with_line_breaks = retrieve_some_text_from_php();
var element = document.querySelectorAll('#output');
element.innerHTML = '<pre>' + text_with_line_breaks + '</pre>';

尝试

let s=`This is man.

     Man like dog.
     Man like to drink.

     Man is the king.`;
     
msg.innerHTML = s.replace(/\n/g,"<br />");
<div id="msg"></div>
本文地址:http://javascript.askforanswer.com/ruheyongyuansutihuanzifuchuanzhongdesuoyouhuanxingfu.html
文章标签:
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!