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

StackOverflow https://stackoverflow.com/questions/10519489

Frage

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.

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.

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

   <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>
War es hilfreich?

Lösung

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

You could consider css to solve this problem.

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

See how the different white-space values work.

Andere Tipps

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.

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

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

Try putting the \r into your replace expressions.

\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.

You could try 

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

which replaces both newline and carriage return characters.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top