当前位置: 首页 > 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、循环…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

安卓基础(aar)

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

为什么要创建 Vue 实例

核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...

WPF八大法则:告别模态窗口卡顿

⚙️ 核心问题&#xff1a;阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程&#xff0c;导致后续逻辑无法执行&#xff1a; var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...