面试官抚须：pre标签在工作中有具体应用场景否？答曰：渲染带转义字符的字符串文本内容

prtyaa 2023-12-26 18:33:59  48753

分类专栏：资讯

pre标签介绍

官方介绍：

HTML <pre> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略)

官方文档的介绍，有些“仙气飘飘”，不太接地气，本文将会用几个例子，来讲解一下，这样的话，更加便于了解之

对于pre标签，我们可以这样简记：

- pre标签，主要用来渲染带有转义字符的（空格符和换行符等）的文本内容（字符串）

举例场景一渲染一首诗歌

效果图

解决方案一使用` `空白符

若是只论这个效果而言，我们可以在html中，使用 空白符，去使劲堆出来也是没问题的，如下代码：

<body>
    <div>白日依山尽</div>
    <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;黄河入海流</div>
    <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;欲穷千里目</div>
    <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更上一层楼</div>
</body>

不过这种方式，就会有些呆板了，我们也不可能会在页面的标签中写一堆空白符号的（不美观，不想维护...）
加之，后端只是负责返回字符串罢了，这种方式也不是动态的，所以不太推荐

解决方案二使用pre标签

应用场景就是，后端把读取到txt文本内容字符串，返回给前端去渲染预览，假设数据库中，有这样一个文本文件，如下图：

这里我们模拟一下后端，使用express简单写一个接口，读取此文件，为了方便直接流方式返回

route.get('/pre.txt1', (req, res) => {
  let txtUrl = './public/txt1.txt' // 假设txt文件在同级目录public文件夹下
  // 此接口允许跨域
  res.header('Access-Control-Allow-Origin', '*');
  // 设置请求头，编码为utf-8
  res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
  // 将读取的结果以管道pipe流的方式返回给前端
  let readStream = fs.createReadStream(txtUrl)
  readStream.pipe(res);
})

有了接口以后，我们直接使用axios发请求，我们JSON序列化一下

<script>
    axios.get('http://ashuai.work/api/pre.txt1').then((res) => {
        console.log( JSON.stringify(res.data) );
    })
</script>

看看打印的结果，如下图：

而恰好，pre标签能够识别转义字符，那这样就对上了！直接来一段完整代码搞定：

解决方案二的完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <pre id="pre"></pre>
    <script>
        let pre = document.querySelector('#pre')
        axios.get('http://ashuai.work/api/pre.txt1').then((res) => {
            console.log( JSON.stringify(res.data) );
            // pre.innerHTML = res.data
            pre.innerText = res.data
        })
    </script>
</body>
</html>

最后，我们审查一下dom元素看看：

至此，一个简单的诗歌渲染需求，就完成了
不过，有的道友就会问了，看着也就那回事啊
莫急，我们来看看下一个需求，就会发现pre标签还是很强大的！

举例场景二渲染一尊大佛文本【复杂了很多】

效果图：

当然，这个大佛，也是服务器上的一个文本内容，如下截图：

所以，遇到这种场景，就必须要使用pre标签，帮我们自动识别，带有转义字符的文本字符串

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <pre id="pre"></pre>
    <script>
        let pre = document.querySelector('#pre')
        axios.get('http://ashuai.work/api/pre.txt2').then((res) => {
            console.log( JSON.stringify(res.data) );
            pre.innerHTML = res.data
            // pre.innerText = res.data
        })
    </script>
</body>
</html>

注意事项一：pre标签横向文字换行样式控制

- pre标签的内容，在宽度不够的情况下，不会自动换行，如下效果图：

- 这个时候我们需要使用css去控制一下换行截断，如下效果图：

完整代码，瞅瞅注释：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        pre {
            font-size: 36px;
            /* pre宽度不够换行 */
            word-wrap: break-word;
            white-space: pre-wrap;
            /* 加点行高，防止太挤了 */
            line-height: 42px;
        }
    </style>
</head>

<body>
    <pre id="pre"></pre>
    <script>
        let pre = document.querySelector('#pre')
        axios.get('http://ashuai.work/api/pre.txt3').then((res) => {
            console.log(JSON.stringify(res.data));
            pre.innerHTML = res.data
        })
    </script>
</body>

</html>

注意事项二文本的编码可能不是utf-8

某些情况下，接口返回的字符串文本，并不是utf-8的编码方式
这种情况下，就需要去编码和解码
比如：charset=utf-8或gbk或gb2312
编码解码，一般都是后端做，某些情况下，可能需要前端去编码和解码
示例如下：

<script>
    //utf-8转gbk
    function utf8ForGbk(str) {
        let enCode = new TextEncoder('gbk');
        let deCode = new TextDecoder('utf-8');
        let newStr = enCode.encode(str);
        let res = deCode.decode(newStr);
        return res;
    }

    //gbk转utf-8
    function gbkForUtf8(str) {
        let enCode = new TextEncoder('utf-8');
        let deCode = new TextDecoder('gbk');
        let newStr = enCode.encode(str);
        let res = deCode.decode(newStr);
        return res;
    }
</script>

行文至此，我们通过以上案例，就可以进一步理解：

pre标签可以用于去渲染带有转义字符的文本字符串...
比如，我们去封装一个组件，去做txt的文本预览

A bad pen is better than a good memory...

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=31018

赞同 0

评论 0 条

面试官抚须：pre标签在工作中有具体应用场景否？答曰：渲染带转义字符的字符串文本内容

pre标签介绍

举例场景一 渲染一首诗歌

效果图

解决方案一 使用&nbsp;空白符

解决方案二 使用pre标签

解决方案二的完整代码

举例场景二 渲染一尊大佛文本【复杂了很多】

效果图：

完整代码

注意事项一：pre标签横向文字换行样式控制

注意事项二 文本的编码可能不是utf-8

相关文章

关注我们

举例场景一渲染一首诗歌

解决方案一使用` `空白符

解决方案二使用pre标签

举例场景二渲染一尊大佛文本【复杂了很多】

注意事项二文本的编码可能不是utf-8