如何用 <br/> 替换某些回车换行符后跟破折号？
Posted
技术标签:
【中文标题】如何用 <br/> 替换某些回车换行符后跟破折号？【英文标题】：How can I replace certain carriage return line feed followed by a dash with a <br/>? 【发布时间】：2012-05-18 04:03:22 【问题描述】：如何使用 javascript 或 jQuery 替换网页中 TD 元素内的文本中的序列 ASCII 13 ASCII 10 -（CR LF DASH 或 /r/n-）？在 *** 和其他地方也有类似的问题，但列出的解决方案不适用于这种特定情况。传入的 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>
【问题讨论】：
【参考方案1】：您的问题是说您只关心在单独的行上显示它们，而不是特别关心替换 \r\n。
你可以考虑用css来解决这个问题。
<style>
tr
white-space:pre-line;
</style>
See how the different white-space values work.
【讨论】：
聪明！这为我解决了这个问题。我必须在 html 中添加一个 xhtml-strict doctype（我可以修改它，因为 html 的顶部是由与正文不同的软件提供的。）另外，我将 CSS 选择器更改为 td 而不是 tr。 【参考方案2】：这适用于您的具体情况：
$this.html($this.html().replace(/\s+\-/g, "<br /> -"));
而不是寻找 CRLF 字符，它需要任何空格，后跟一个破折号。如果您的内容中有破折号跟随空格，它们也会添加 br 标记。
IE 8 对于换行有一些奇怪的行为。如果我得到解释，我会更新这个。
【讨论】：
这是一个有趣的行为。 IE 将 \r\n 识别为空格，但不将其识别为 \r\n。不幸的是，动态提供的数据可能包括空格后面的破折号。看到你的想法后，我在 .each 循环中尝试了以下操作，但失败了。它的行为就好像 \r\n 正在转换为实际空间：replaceSpace = $this.html().replace(/ \-/g, "-"); replaceWhiteSpace = $this.html().replace(/\s+\-/g, "-"); if (replaceSpace != replaceWhiteSpace) $this.html($this.html().replace(/\s+-/g, "-")); 看起来 IE8 及以下在渲染 dom 之前剥离了 %OA 字符，这使得在 javascript 中几乎不可能做到这一点。 css 解决方案确实是最佳的，但至少知道为什么在 IE8 中会发生这种情况会很好。【参考方案3】：你可以试试
$this.html().replace(/[\n\r]+\-/g, "<br/>-")
替换换行符和回车符。
【讨论】：
this 周围不应该有一个 ( 和 a ) 吗？
是的。对不起。我相应地修正了我的答案。
不是吗？这让我很惊讶。你能在 JS 控制台中查看 replace 调用中的内容和结果吗？但是授予：由于这仅用于显示，因此接受的答案无论如何都不那么骇人听闻...【参考方案4】：
您只是替换\n-，但您声明要替换的字符序列是\r\n-
尝试将 \r 放入替换表达式中。
\r 字符虽然不是通常支持的 windows/linux 换行符，但通常仍会在试图迎合所有人的浏览器/源查看器中显示为换行符。
【讨论】：
您认为最终版本应包含 \r 是正确的。需要明确的是，\r\n- 序列存在于源文件中。我在二进制文件编辑器中查看它，所以我在十六进制编辑器中看到 0D 0A 2D 。但无论哪种方式， \r\n\- 或 \n\- 都会拿起字符串。我目前的假设是，在 html() 方法或 innerHTML 属性到达它之前，某些东西正在剥离 \r\n。我将在代码中添加 \r 以使其与问题匹配。以上是关于如何用 <br/> 替换某些回车换行符后跟破折号？的主要内容，如果未能解决你的问题，请参考以下文章