3

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>
Improve this question

4 Answers 4

Reset to default
11

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.

Improve this answer
1
  • clever! That resolves this for me. I had to add an xhtml-strict doctype to the html (which I can modify since the top of the html is provided by a different piece of software than the body.) Also, I changed the CSS selector to td instead of tr.
    – earth_tom
    Commented May 10, 2012 at 12:39
1

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.

Improve this answer
2
  • That's an interesting behavior. IE recognizes the \r\n as whitespace but not more specifically as \r\n. Unfortunately, the dynamically-supplied data can include dashes that follow spaces. After seeing your \s idea, I tried the following inside the .each loop and it failed. It behaves as if the \r\n is getting converted into an actual space: replaceSpace = $this.html().replace(/ \-/g, "<br/>-"); replaceWhiteSpace = $this.html().replace(/\s+\-/g, "<br/>-"); if (replaceSpace != replaceWhiteSpace) { $this.html($this.html().replace(/\s+-/g, "<br/>-")); }
    – earth_tom
    Commented May 9, 2012 at 19:52
  • 1
    It looks like IE8 and below strip the %OA character before the dom is rendered, making it pretty much impossible to do this in javascript. The css solution is really optimal, but it would be nice to at least know why this is happening in IE8.
    – hellslam
    Commented May 10, 2012 at 19:23
0

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.

Improve this answer
1
  • Your correct that the final version should include the \r. To be clear, the \r\n- sequence is present in the source file. I viewed it in a binary file editor, so I'm seeing 0D 0A 2D in the hex editor. But either way, \r\n\- or \n\- would pick up the string. My present hypothesis is that something is stripping out the \r\n before the html() method or innerHTML property gets to it. I'll add the \r to the code to make it match the question.
    – earth_tom
    Commented May 9, 2012 at 16:01
0

You could try 

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

which replaces both newline and carriage return characters.

Improve this answer
3
  • Isn't there meant to be a ( and a ) around this respectively?
    – Anish Gupta
    Commented May 9, 2012 at 15:55
  • Yep. Sry. I fixed my answer accordingly.
    – radiospiel
    Commented May 9, 2012 at 15:58
  • Not? That surprises me. Can you look into what goes in the replace call and what comes out of it in the JS console? But granted: as this is for display only, the accepted answer is less hacky anyways...
    – radiospiel
    Commented May 11, 2012 at 12:36

Not the answer you're looking for? Browse other questions tagged or ask your own question.