按照回车换行符给文本添加div标签

最新推荐文章于 2023-04-11 16:40:05 发布
最新推荐文章于 2023-04-11 16:40:05 发布
阅读量994 收藏 1
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WangJiangNan17214/article/details/72639429
版权
这篇博客介绍了一个JavaScript函数，该函数将文本区域内的文本按照回车换行符拆分成数组，然后将每个元素包裹在
标签中，用于格式化显示。用户可以通过点击按钮来触发这个格式化过程。
摘要由CSDN通过智能技术生成
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Testing</title>
</head>
<body>
<textarea id="txtArea" type="text" style="width:800px;height:400px;border:1px solid red;display:inline-block;" value=""></textarea>
      <button οnclick="getArray()" style="display:inline">格式化</button>
  <textarea id="txtArea1" style="width:800px;height:400px;border:1px solid red;display:inline-block;" value=""></textarea>
<script ty
最低0.47元/天 解锁文章
WJN17214
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在输入框回车添加标签
06-04
在输入框回车添加标签
JS组件 回车增加标签（可拖动排序）
chelly_z的博客
05-20 254
<template> <div @click="focusTypeInput"> <draggable v-model="tempList" tag="div" :animation="200" handle=".typeList-item" class="typeList-outside" :move="onMove" @end="changeIndex"> <div v-for="(item, typeIndex...
回车添加删除标签
jo miro的博客
05-13 316
今天借用几分钟，写了一个回车添加标签、删除标签、标签获取的js，大家可以随意使用啊！！！ html： <div id=""> <div id="tagsContainer"> <input type="text" id="tagIn" size="8" maxlength="15" placeholder="输入标签回车"/> </div> </div> css: <style type="text/css"&g
输入框回车生成标签的demo
12-08
在输入框输入字符后回车生成对应的标签，可以删除和无限添加，并且增加了很多的事件监听。如回车前监听，回车后，删除标签，重新渲染数据，清空数据等。
用div代替textarea,实现在文本框中使用回车<br>和设置字体功能
weixin_34006468的博客
06-28 243
<div contentEditable="true"></div> css里添加overflow-y：scroll; 添加滚动条 转载于:https://www.cnblogs.com/xuedong09/p/3160523.html
关于textarea文本转为html即回车换行
09-28
总结起来，将`textarea`中的文本转换为HTML，以便保留回车换行，关键在于使用正则表达式或字符串的`Replace`方法替换换行符为` `标签。在处理跨平台的文本时，务必考虑`\r\n`和`\n`两种情况。正确实现这一功能，...
Java使用正则表达式删除所有HTML标签的方法示例
08-30
`regEx_space`正则表达式`\\s*|\t|\r|\n`用来匹配零个或多个空格、制表符、回车符和换行符。这个正则表达式确保了返回的文本没有多余的空白字符。 接下来，我们来看`delHTMLTag`方法的实现。这个方法使用了`...
简单实用的HTML代码借鉴.pdf
01-02
* 标签用于插入一个回车换行符 * <blockquote></blockquote>标签用于从两边缩进文本 * <dl></dl>标签用于创建一个定义列表 * 标签用于放在每个定义术语词之前 * 标签用于放在每个定义之前 * <ol></ol>标签用于...
textarea 在IE和FF下换行无法正常显示的解决方法
10-28
当需要将这些文本显示在页面上的非`textarea` 元素（如`div` 或`p` 标签）时，需要将` ` 转回换行符。这一步骤在JavaScript中同样使用`replace()` 函数： ```javascript var displayedText = formattedText....
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
09-05
对于一个元素的第一个子节点（即firstChild），如果这个子节点是文本节点（TextNode），并且其值的前n个字符是空格（包括空格、制表符`\t`、换行符`\n`、回车符`\r`以及分页符U+000C），那么这些空格将被忽略。...
textarea实现空格、换行功能
九段刀客的博客
06-10 892
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <textarea name="" i.
简单的解决textarea文本框内容换行，对应到页面的内容也换行的问题
那一日面朝大海的博客
01-26 1万+
当我们在页面上通过 textarea 提交数据的时候，我们输入的内容在提交后都会被处理为了一段内容，即使我们在 textarea 里面输入了很多的换行，提交后也是一段内容，那如果我们需要将我们输入的信息按照输入的形式保存下来该如何做呢？ 最近项目中就遇到了这样一个需求，页面左边是展示部分，右边是表单用来添加资料， 表单里有textarea文本框，在里面输入内容，可以回车换行，然后点
vue antd a-textarea内 回车换行递增序号
weixin_45231437的博客
04-11 653
vue antd a-textarea内 回车换行递增序号
div 可编辑时按回车键会出现类似多个div的情况
baidu_24743861的博客
05-17 1341
解决办法：给div添加如下CSS .read-write-plaintext-only { //纯文本 -webkit-user-modify: read-write-plaintext-only; }
CSS：div中文字换行设置
Alice_Lee_Lee的博客
01-04 2338
div 中 文字换行设置
DIV中文字换行显示
lingshuaijie的博客
08-25 6583
div中文字换行问题： div设置宽度后，如果div里放的是汉字，文字超过div宽度会自动换行，如果是字母，则不会默认换行，超出div的宽度会溢出，需要通过属性值进行强制换行 word-break:break-all 只对英文起作用，以字母作为换行依据 word-wrap:break-word 只对英文起作用，以单词作为换行依据 white-space:prare-wp 只对中文起作用，强制换行 white-space:nowrap 强制不换行，都起作用
textarea、div、pre中如何使用空白、换行符
赶路人儿
07-22 2757
我们都知道，html的“容器”元素可以通过white-sapce属性实现对空白、换行符的设置，可参考这篇文章：https://blog.csdn.net/liuxiao723846/article/details/118994673 本文介绍主要的容器元素textarea、div、pre中如何处理空白、换行符。 1、textarea： textarea元素本身具有white-space:pre-wrap属性。我们看个例子： <html> <body> <textar
html中如何div转换下一行,div怎么换行
热门推荐
weixin_30598047的博客
05-31 1万+
DIV怎么才不会自动换行？设定white-space:nowrap就可以不换行了。 但是这样div的宽度会自动增大。如果你想控制宽度的话，可以参考下面两种方式。 This is a test. This is a test.网页设计中DIV标签怎样实现内容换行网页设计中DIV标签实现内容换行，这个的话，就是通过你设置的div的宽度和高度，如果你的文字只要过多，书写超过宽度自然就会换行，也可以说是被...
js 字符串中添加回车换行符
最新发布
06-11
在 JavaScript 字符串中，可以使用特殊字符 `\n` 来表示换行符。例如： ```javascript var str = "第一行\n第二行\n第三行"; console.log(str); ``` 输出为： ``` 第一行 第二行 第三行 ``` 在字符串中使用 `\n` 后，字符串会在该位置自动换行。需要注意的是，`\n` 是一个特殊字符，需要使用引号括起来才能被正确解析。如果需要在字符串中显示 `\n` 字符本身，可以使用双反斜杠 `\\n` 来表示。例如： ```javascript var str = "这是一个\\n换行符"; console.log(str); ``` 输出为： ``` 这是一个\n换行符 ``` 在这个例子中，字符串中的 `\\n` 被解析为 `\n` 字符，并被换行符替换。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值