如何用 替换某些回车换行符加破折号？

Question

如何用 替换某些回车换行符加破折号？

javascriptjqueryreplacehtml-tablelinefeed

3

如何使用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。

我想进行此替换，因为我希望每当页面中存在/r/n-序列时，两行文本都出现在显示输出中的元素中。

请注意，我已包括两个版本的替换，一个是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>

- earth_tom

4个回答

1

这适用于您的特定情况：

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

不是寻找CRLF字符，而是寻找任何紧随空格后面的破折号。如果您的内容中有跟随空格的破折号，则它们也将添加br标签。

IE 8在换行方面存在一些奇怪的行为。如果我得到解释，我会更新这个问题。

- hellslam

这是一个有趣的行为。IE将\r\n识别为空白，但没有更具体地识别为\r\n。不幸的是，动态提供的数据可能包含紧跟空格后面的破折号。在看到你的\s想法之后，我尝试在.each循环内部使用了以下代码，但失败了。它的行为就像\r\n被转换成了实际的空格：replaceSpace = $this.html().replace(/ -/g, " -"); replaceWhiteSpace = $this.html().replace(/\s+-/g, " -"); if (replaceSpace != replaceWhiteSpace) { $this.html($this.html().replace(/\s+-/g, " -")); } - earth_tom

1

看起来IE8及以下版本在DOM渲染之前会剥离%OA字符，使得用JavaScript实现这个功能几乎不可能。CSS解决方案确实是最优的，但至少知道为什么在IE8中会发生这种情况也是好的。 - hellslam

0

你只是想替换 \n-，但是你说你要替换的字符序列是 \r\n-。

尝试在替换表达式中加入 \r。

\r 字符虽然不是 Windows/Linux 典型支持的换行符，但在一些试图迎合所有人的浏览器/源代码查看器中仍会显示为换行符。

- Jeremy Lawson

你是正确的，最终版本应该包括\r。明确一下，在源文件中存在\r\n序列。我在二进制文件编辑器中查看了它，所以在十六进制编辑器中看到的是0D 0A 2D。但无论哪种方式，\r\n-或\n-都可以捕获字符串。我目前的假设是，在html()方法或innerHTML属性到达之前，某些内容会剥离\r\n。我将添加\r到代码中，以使其与问题匹配。 - earth_tom

0

你可以尝试

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

它可以替换换行符和回车符。

- radiospiel

this 周围不应该分别有一个 ( 和一个 ) 吗？ - Anish Gupta

是的。抱歉。我已经相应地修正了我的回答。 - radiospiel

不是吗？这让我感到惊讶。您能在JS控制台中查看replace调用中发生了什么以及它的输出吗？但是可以肯定的是：由于这只是用于显示，因此接受的答案无论如何都较少破解... - radiospiel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jeremy Lawson · Accepted Answer

你的问题表明你只想在不同的行上显示它们，而并非特别需要替换 \r\n。

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

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

查看各种空格值的工作方式。

如何用 <br/> 替换某些回车换行符加破折号？