我对零宽度空间的使用正在打破日期答案

【问题标题】：My Use of Zero Width Space is breaking dates我对零宽度空间的使用正在打破日期
【发布时间】：2021-02-16 18:16:58
【问题描述】：

目前我正在尝试修复由于使用“/”而导致的单词过长导致的 html 表格中的断字。

示例：VeryLongWord/AnotherLongWord

我正在尝试将这个连词分解为：
超长字/
另一个长词

让它在斜线处自然断裂。

我正在尝试通过使用零宽度空格字符 ( ) 它运行良好...但仅适用于角色。

当应用于表格的整列时，列中的日期会变成方框。

像这样：10/????/????

var x = document.getElementsByClassName("printIssue");
         for (i=0; i<x.length; i++) {
            x[i].innerHTML = x[i].innerHTML.replace(/(\/)/g, "/&#8239");

我无法访问/更改单元格中的数据，因此我必须在前端使用 JS/CSS/HTML 对其进行修复。

在选择“/”时，我可以使用正则表达式来忽略日期吗？

【问题讨论】：

HTML 实体必须以分号结尾。
一旦你完成这项工作，还有一件事需要考虑：如果你的一个用户从你的表中复制/粘贴，这些字符将与内容一起出现。

标签： javascript html regex

【解决方案1】：

HTML 实体必须以分号结尾。由于您不包含它，因此插入点之后的数字将被视为 unicode 点值的一部分，因此会产生不同的、可能未定义的字符。 ../../.. 格式的日期确实如此。例如，这个：

10/11/21

...将被你的代码替换成：

10/&#823911/&#823921

这些不是您想要的 Unicode 点（#823911 和 #823921）。

所以添加分号结束符：

.replace(/(\/)/g, "/&#8239;");

【讨论】：

【解决方案2】：

考虑使用<wbr /> 标签而不是&#8239; 来获得一个分词没有连字符只在需要的地方。或者使用&shy; 实体在需要的地方获得一个分词with 连字符。

const text = 'LongWord/NextWord and a date 20210/02/16';
let result1 = text.replace(/\//g, '/<wbr />');
let result2 = text.replace(/\/(?!\d)/g, '/<wbr />');
$('#orig').html(text);
$('#result1').html(result1);
$('#result2').html(result2);

body {
  font-family: Helvetica;
  font-size: 90%;
}
div {
  width: 4.5em;
  margin: 10px 10px;
  padding: 3px 5px;
  background-color: #f0fff0;
  border: 1px dotted #888;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<html>
<body>
<p>Original</p>
<div id="orig"></div>
<p>Result 1</p>
<div id="result1"></div>
<p>Result 2</p>
<div id="result2"></div>
</body>
</html>

运行这段代码sn-p看看。

原文显示原文
结果 1 显示使用 <wbr /> 的可选分词
结果 2 类似于结果 1，但不包括日期的分词，例如如果斜线后面的字符是数字

【讨论】：