javascript 如何用 <br/> 替换某些回车换行符后跟破折号?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10519489/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 10:08:28  来源:igfitidea点击:

How can I replace certain carriage return line feed followed by a dash with a <br/>?

javascriptjqueryreplacehtml-tablelinefeed

提问by earth_tom

How can I replace the sequence ASCII 13 ASCII 10 - (CR LF DASH or /r/n-) in the text inside a TD element in a web page using javascript or jQuery? There are similar quesitons about this in stackoverflow and elsewhere, but the solutions listed don't work on this particular scenario. The incoming HTML is generated dynamically by a piece of my customer's legacy software that is not going to be changed, but it references a javascript file that I can change. A shortened version of the page is given below. The actual page contains between zero and twenty rows of data, some of which contain multiple lines. My users are on Internet Explorer 8 and neither of the two lines below is working. I've tried just replacing the carriage return and just replacing the line feed. I've tried this from javascript and jQuery without any visible effect. When I save the page from Internet Explorer 8 and view it in a hex editor, the carriage return and line feed characters are present in the client. The crux of the problem is exposing the /n in the text to JavaScript.

如何使用 javascript 或 jQuery 替换网页中 TD 元素内文本中的序列 ASCII 13 ASCII 10 -(CR LF DASH 或 /r/n-)?在 stackoverflow 和其他地方也有类似的问题,但列出的解决方案不适用于这个特定场景。传入的 HTML 是由我客户的一个遗留软件动态生成的,该软件不会被更改,但它引用了一个我可以更改的 javascript 文件。下面给出了该页面的缩短版本。实际页面包含零到二十行数据,其中一些包含多行。我的用户使用的是 Internet Explorer 8,以下两行都不起作用。我试过只替换回车符和只替换换行符。我已经在 javascript 和 jQuery 中尝试过这个,但没有任何可见的效果。当我从 Internet Explorer 8 保存页面并在十六进制编辑器中查看它时,回车符和换行符出现在客户端中。问题的关键是将文本中的 /n 暴露给 JavaScript。

I want to perform this replacement because I want the two lines of text to appear in the displayed output any time the sequence /r/n- exist in the page in a element.

我想执行此替换,因为我希望两行文本出现在显示的输出中,只要序列 /r/n- 存在于页面中的元素中。

Note that I've included two versions of the replacement, one jQuery and one JavaScript. Neither does what I want it to do.

请注意,我已经包含了两个版本的替换,一个 jQuery 和一个 JavaScript。我想要它做的也不是。

   <html>
    <head>
    <title>Page Testing </title>
    <script src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('td').each(function () {
                $this = $(this);
                $this.html($this.html().replace(/\r\n\-/g, "<br/>-"));
                this.innerHTML = (this.innerHTML.replace(/\r\n\-/g, "<br/>-"));
            });
        });
    </script>
    </head>
    <body>
    <table>
    <tbody>
    <tr>
     <td>-First Content
    -Second Line of Content</td>
    <td>-How I want it to look<br/>-After the transformation</td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>

回答by Jeremy Lawson

Your question says you only care about DISPLAYING them on separate lines, not specifically about replacing the \r\n.

你的问题是说你只关心在单独的行上显示它们,而不是特别关心替换 \r\n。

You could consider css to solve this problem.

你可以考虑用css来解决这个问题。

<style>
    tr {
        white-space:pre-line;
    }
</style>

See how the different white-space values work.

查看不同的空白值如何工作。

回答by hellslam

This works for your specific case:

这适用于您的特定情况:

$this.html($this.html().replace(/\s+\-/g, "<br /> -"));

Instead of looking for the CRLF characters, it takes any white space followed by a dash. If there are dashes in your content that follow spaces, they will also have the br tag added.

它不是寻找 CRLF 字符,而是需要任何空格后跟一个破折号。如果您的内容中在空格后面有破折号,它们也会添加 br 标签。

There is some strange behavior with IE 8 for newlines. If I get an explanation I'll update this.

IE 8 对于换行符有一些奇怪的行为。如果我得到解释,我会更新这个。

回答by radiospiel

You could try

你可以试试

$this.html().replace(/[\n\r]+\-/g, "<br/>-")

which replaces both newline and carriage return characters.

它替换换行符和回车符。

回答by Jeremy Lawson

You're only replacing \n-, but you stated that the character sequence you're trying to replace is \r\n-

您只是替换 \n-,但您声明要替换的字符序列是 \r\n-

Try putting the \r into your replace expressions.

尝试将 \r 放入替换表达式中。

\r characters, while not a normally supported windows/linux newline, will often still show as a newline in browsers/source viewers which try to cater to everyone.

\r 字符虽然不是通常支持的 windows/linux 换行符,但通常仍会在试图迎合所有人的浏览器/源代码查看器中显示为换行符。