使用 white-space属性来实现保留文本域 textarea的换行格式和空格格式

拿我格子衫来 • 2023-01-02 • 云技术社区 • 274 阅读

背景

昨天产品需求评审，产品经理收到用户的反馈，在系统中有一些文本域，用户希望在在文本中填写的文本内容和格式都能够被保留下来，目前只能保存文本内容，对于文本域的换行和空格，在显示的时候都没有正确显示。

接到这个需求，我搜索了一下，网上大多数是获取文本域的内容后，将其中的换行符，空格替换成html标签，如<br>，使用JavaScript处理，然后将这些数据转化后，保存的后端，在显示时，使用innerHTML来显示到一个div或p标签内。这里有一个很大的安全隐患就是，脚本注入，如果用户输入了一些script，而这些又没经过处理直接使用innerHTML显示到页面上，这是很危险的。

于是我寻求另一种解决途径。

最终我发现设置元素样式的white-space可以将文本域的换行和空格正确显示出来。

white-space 属性解释

下面是white-space的几个值其及其解释

属性	换行符	空格和制表符	文字换行	行尾空格
normal	合并	合并	换行	删除
nowrap	合并	合并	不换行	删除
pre	保留	保留	不换行	保留
pre-wrap	保留	保留	换行	挂起
pre-line	保留	合并	换行	删除
break-spaces	保留	保留	换行	换行

normal

连续的空白符会被合并，换行符会被当作空白符来处理。换行在填充「行框盒子(line boxes)」时是必要。

nowrap

和 normal 一样，连续的空白符会被合并。但文本内的换行无效。

pre

连续的空白符会被保留。在遇到换行符或者
元素时才会换行。

pre-wrap

连续的空白符会被保留。在遇到换行符或者
元素，或者需要为了填充「行框盒子(line boxes)」时才会换行。

pre-line

连续的空白符会被合并。在遇到换行符或者
元素，或者需要为了填充「行框盒子(line boxes)」时会换行。

break-spaces

与 pre-wrap的行为相同，除了：

任何保留的空白序列总是占用空间，包括在行尾。

每个保留的空格字符后都存在换行机会，包括空格字符之间。

这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）。

演示demo

此外我还专门写了一个简单的demo来演示使用white-space来正确显示文本域中的文本格式。

演示demo图片

由上图可见，将元素的white-space属性设置为 space-pre，pre-wrap，pre-line，break-space 都可以获得不错的效果

demo代码

<html>

<head>
    <title>保存文本域格式</title>
    <style type="text/css">
        .showtext {
            padding: 10px;
            border: 1px solid #ddd;
        }
        .white-space-normal {
            white-space: normal;
        }
        .white-space-nowrap {
            white-space: nowrap;
        }
        .white-space-pre {
            white-space: pre;
        }
        .white-space-pre-wrap {
            white-space: pre-wrap;
        }
        .white-space-pre-line {
            white-space: pre-line;
        }
        .white-space-break-spaces {
            white-space: break-spaces;
        }
    </style>
</head>

<body>
    <div style="width: 800px; margin: 40px auto;">
        <textarea id="myinput" style="height: 200px; width: 200px;"></textarea>
        <button onclick="submit()">提交</button>
        <p id="normal" class="showtext white-space-normal">normal:</p>
        <p id="nowrap" class="showtext white-space-nowrap">nowrap:</p>
        <p id="pre" class="showtext white-space-pre">space-pre:</p>
        <p id="pre-wrap" class="showtext white-space-pre-wrap">pre-wrap:</p>
        <p id="pre-line" class="showtext white-space-pre-line">pre-line:</p>
        <p id="break-spaces" class="showtext white-space-break-spaces">break-spaces:</p>
    </div>
    <script>
        function submit() {
            const inputValue = document.querySelector('#myinput').value
            console.log('文本域内容', inputValue);
            [...document.querySelectorAll('.showtext')].forEach(x => {
                x.append(inputValue)
            })
        }
    </script>
</body>

</html>