当前位置: 首页 > news >正文

textarea之换行、replace、\n、br、innerHTML

文章目录

  • 前言
  • 换行符介绍
  • JavaScript部分
  • html部分


前言

textarea标签本身不识别换行功能,回车换行用的是\n换行符,输入时的确有换行的效果,但是渲染时就只是一个空格了。这时就需要利用换行符\nbr标签的转换进行处理。


换行符介绍

表格

序号字符/标签描述
1
换行(Line Feed),也表示\n
2
回车(Carriage Return),也表示\r
3\n换行(Line Feed),也表示

4\r回车(Carriage Return),也表示
5br<br />元素在文本中生成一个换行(回车)符号。此元素在写诗和地址时很有用,这些地方的换行都非常重要。

&#10;与&#13;的区别

在不同的操作系统中,换行符的表示方式不一样。在unix系统中,换行符使用\n;在windows系统中换行使用\r\n;在旧版macOS中换行使用回车符\r,在新版macOS中使用与unix系统相同的换行方式。


\n与\r的区别

关于回车(Carriage Return)和换行(Line Feed)这两个概念的来历和区别。
在计算机还没有出现之前,有一种叫做电传打字机(Teletype Model 33)的玩意,每秒钟可以打10个字符。但是它有一个问题,就是打完一行换行的时候,要用去0.2秒,正好可以打两个字符。要是在这0.2秒里面,又有新的字符传过来,那么这个字符将丢失。
于是,研制人员想了个办法解决这个问题,就是在每行后面加两个表示结束的字符。一个叫做回车,告诉打字机把打印头定位在左边界;另一个叫做换行,告诉打字机把纸向下移一行。这就是换行和回车的来历,从它们的英语名字上也可以看出一二。
后来,计算机发明了,这两个概念也就被般到了计算机上。那时,存储器很贵,一些科学家认为在每行结尾加两个字符太浪费了,加一个就可以。于是,就出现了分歧。
Unix系统里,每行结尾只有换行,即\nWindows系统里面,每行结尾是换行和回车,即\n\rMac系统里,每行结尾是回车,一个直接后果是Unix/Mac系统下的文件在Windows里打开的话,所有文字会变成一行;而Windows里的文件在Unix/Mac下打开的话,在每行的结尾可能会多出一个^M符号。


br

<br>可插入一个简单的换行符。
<br>标签是空标签,意味着它没有结束标签,因此这是错误的: <br></br>。在XHTML中,把结束标签放在开始标签中,也就是<br />
注意<br>标签只是简单地开始新的一行,而当浏览器遇到<p>标签时,通常会在相邻的段落之间插入一些垂直的间距。


JavaScript部分

textarea中输入换行时,换行符是\n
html页面中显示换行时,使用的是br标签
所以解决这个问题的思路也很简单,就是在前端页面中,将\n转换成br标签即可。
替换可以在数据提交阶段,也可以在数据渲染阶段,此文章使用了渲染阶段的替换方式。

let str =  res.info.replace(/\n/g, '<br />');this.str = str;

html部分

经过之前对字符串的处理,最终获取到的数据123<br />456。然后只需要通过vue中的v-html指令或JavaScript中的innerHTML方法将br标签渲染出来即可。

<div v-html="str"></div>
idA.innerHTML = str;

相关文章:

textarea之换行、replace、\n、br、innerHTML

文章目录 前言换行符介绍JavaScript部分html部分 前言 textarea标签本身不识别换行功能&#xff0c;回车换行用的是\n换行符&#xff0c;输入时的确有换行的效果&#xff0c;但是渲染时就只是一个空格了。这时就需要利用换行符\n和br标签的转换进行处理。 换行符介绍 表格 序…...

SKD240

SKD240 系列智能电力仪表 SKD240 系列智能电力仪表是陕西斯科德智能科技有限公司自主研发、生产的。 产品概述 - 点击了解详情 SKD240采用先进的微处理器和数字信号处理技术&#xff08;内置主芯片采用32位单片机, 采用32位浮点型真有效值处理数据&#xff09;&#xff0c;测量…...

大数据采集怎么做呢?

随着互联网的发展&#xff0c;大数据已经成为了一个非常热门的话题。大数据采集是大数据分析的第一步&#xff0c;也是非常重要的一步。本文将介绍大数据采集的基本概念、采集的方法、采集的难点以及采集的注意事项等方面&#xff0c;希望能够对大家有所帮助。 一、大数据采集…...

【学习日记】操作系统-入门知识-个人学习记录

我的学习笔记链接&#xff1a; MyLinuxProgramming 参考资料 CSAPP操作系统导论OSTEP √APUEhttps://stevens.netmeister.org/631软件调试王道-操作系统操作系统真象还原小林coding-图解系统https://xiaolincoding.com嵌入式软件开发笔试面试指南Linux是怎样工作的2020 南京大…...

ChatGPT自动生成思维导图

&#x1f34f;&#x1f350;&#x1f34a;&#x1f351;&#x1f352;&#x1f353;&#x1fad0;&#x1f951;&#x1f34b;&#x1f349; ChatGPT自动生成思维导图 文章目录 &#x1f350;问题引入&#x1f350;具体操作markmapXmind &#x1f433;结语 &#x1f…...

count(0)、count(1)和count(*)、count(列名) 的区别

当我们对一张数据表中的记录进行统计的时候&#xff0c;习惯都会使用 count 函数来统计&#xff0c;但是 count 函数传入的参数有很多种&#xff0c;比如 count(1)、count(*)、count(字段) 等。 到底哪种效率是最好的呢&#xff1f;是不是 count(*) 效率最差&#xff1f; 一.…...

python爬虫入门,10分钟就够了,这可能是我见过最简单的基础教学

一、基础入门 1.1什么是爬虫 爬虫(spider&#xff0c;又网络爬虫)&#xff0c;是指向网站/网络发起请求&#xff0c;获取资源后分析并提取有用数据的程序。 从技术层面来说就是 通过程序模拟浏览器请求站点的行为&#xff0c;把站点返回的HTML代码/JSON数据/二进制数据&…...

华为OD机试真题 Java 实现【记票统计】【牛客练习题】

一、题目描述 请实现一个计票统计系统。你会收到很多投票,其中有合法的也有不合法的,请统计每个候选人得票的数量以及不合法的票数。 (注:不合法的投票指的是投票的名字不存在n个候选人的名字中!!) 数据范围:每组输入中候选人数量满足 1≤n≤100 ,总票数量满足 1≤…...

.NET并行计算

一段很简答的&#xff0c;模拟多任务并发的测试代码。 private void button_Click(object sender, EventArgs e) { List<Action> actions new List<Action>(); for (int i 0; i < 30; i) { //匿…...

Python:Python编程:金融量化交易

金融量化交易 1. numpy2. scipy3. Pandas3.1 : Series 3.2&#xff1a; DataFrame代码示例 在金融量化交易中&#xff0c;下面几个模块是应用的比较广泛的 numpy (Numberic Python) : 提供大量的数值编程工具&#xff0c;可以方便的处理&#xff1a;向量矩阵等运算&#xff0c;…...

「HTML和CSS入门指南」canvas 标签详解

什么是 canvas 标签? 在 HTML 中,canvas 标签用于在网页中绘制图形、动画和其他复杂的视觉效果。它是一个独立的标签,并且可以使用 JavaScript 来操纵和渲染其内容。使用 canvas 标签可以帮助您创造交互性更强、生动更具吸引力的用户界面和体验。 canvas 标签的基本语法 以…...

【JS】1699- 重学 JavaScript API - WebSockets API

❝ 前期回顾&#xff1a; 1. Page Visibility API 2. Broadcast Channel API 3. Beacon API 4. Resize Observer API 5. Clipboard API 6. Fetch API 7. Performance API 8. Web Storage API ❞ WebSockets API 提供了一种在客户端和服务器之间建立持久连接的机制&#xff0c;使…...

String s = new String(“xyz“) 创建了几个对象?

这个问题相信每个学习 java 的同学都不陌生&#xff0c;作为一个经典的面试题&#xff0c;到现在工作这么多年了我真是认为挺操蛋的一个问题&#xff0c;在网上到现在你仍然可以看见很多讨论这个问题的人&#xff0c;其中不乏工作很多年的人都有争论&#xff0c;我认为还是有必…...

STL库(1)

STL库&#xff08;1&#xff09; vectorvector介绍vector使用初始化元素访问内存扩容插入删除 listlist介绍初始化&#xff0c;元素访问插入删除元素 vector和list区别 vector vector介绍 vector是可以改变大小的数组的容器。其内存结构和数组一样&#xff0c;使用连续的存储…...

玻璃制品行业丨外贸业务管理难点及解决方案

玻璃作为一种重要的建筑材料&#xff0c;在国际贸易中一直占有一定的份额。随着国外市场需求量的不断增加&#xff0c;对玻璃制品的技术含量要求越来越高&#xff0c;需要在研发方面的投入也逐步加大。由于国际市场竞争激烈&#xff0c;想要做玻璃制品行业的外贸公司&#xff0…...

Spring Boot如何实现自定义Spring Boot启动器

Spring Boot如何实现自定义Spring Boot启动器 在Spring Boot中&#xff0c;启动器&#xff08;Starter&#xff09;是一组依赖项的集合&#xff0c;它们一起提供了某个特定的功能。使用Spring Boot启动器可以让我们更加方便地集成第三方库和框架&#xff0c;并且可以避免版本冲…...

【面试题HTTP中的两种请求方法】GET 和 POST 有什么区别?

GET 和 POST 有什么区别&#xff1f; 1.相同点和最本质的区别1.1 相同点1.2 最本质的区别 2.非本质区别2.1 缓存不同2.2 参数长度限制不同2.3 回退和刷新不同2.4 历史记录不同2.5 书签不同 总结代码示例 GET 和 POST 是 HTTP 请求中最常用的两种请求方法&#xff0c;在日常开发…...

Allegro16.6详细教程(三)

確定Pad的層面 (1)用Single layer mode開關來控制pad type 勾選Single layer mode,則pad為單面孔,比如SMD 不勾選Single layer mode,則pad為通孔,比如:via (2)用滑鼠左鍵點選BEGIN LAYER彈出下面3個欄位 Regular, Thermal Relief, Anti Pad;Regular用於正片,Thermal R…...

Python3数据分析与挖掘建模(6)离散分布分析示例

1. 离散分布分析示例 相关库&#xff1a; pandas详细用法 numpy详细用法 1.1 引入算法库 # 引入 pandas库 import pandas as pd # 引入 numpy库 import numpy as np# 读取数据 dfpd.read_csv("data/HR.csv")# 查看数据 df Out[6]: satisfaction_level last_eval…...

汇编语言程序设计基础知识二

五、顺序结构 1、程序设计的步骤 1、分析问题 2、建立数据模型 3、设计算法 4、编制程序 5、上机调试 2、流程图的应用 3、程序的基本控制结构 1、顺序结构&#xff1a;程序顺序执行&#xff0c;不发生跳转 2、分支结构&#xff1a;程序在执行过程中发生跳转 3、循环…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

如何理解 IP 数据报中的 TTL?

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

全面解析数据库:从基础概念到前沿应用​

在数字化时代&#xff0c;数据已成为企业和社会发展的核心资产&#xff0c;而数据库作为存储、管理和处理数据的关键工具&#xff0c;在各个领域发挥着举足轻重的作用。从电商平台的商品信息管理&#xff0c;到社交网络的用户数据存储&#xff0c;再到金融行业的交易记录处理&a…...