首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在可内容编辑的div中重新生成innerHTML后在单词中间设置插入符号位置

在可内容编辑的div中重新生成innerHTML后,在单词中间设置插入符号位置,可以通过以下步骤实现:

  1. 获取div元素:首先,通过JavaScript代码获取到需要编辑的div元素,可以使用document.getElementById()或者document.querySelector()方法来获取。
  2. 获取div的innerHTML内容:使用innerHTML属性获取div元素的当前内容,将其保存到一个变量中。
  3. 在单词中间设置插入符号位置:对于保存的innerHTML内容,可以使用正则表达式或字符串处理方法来找到需要插入符号的位置。可以使用split()方法将内容按照空格分割成单词数组,然后遍历数组找到需要插入符号的位置。
  4. 插入符号:在找到需要插入符号的位置后,可以使用字符串拼接或者数组方法将插入符号添加到相应位置。
  5. 更新div的innerHTML:将更新后的innerHTML内容赋值给div元素的innerHTML属性,以更新显示。

以下是一个示例代码:

代码语言:txt
复制
// 获取div元素
var divElement = document.getElementById("editableDiv");

// 获取div的innerHTML内容
var content = divElement.innerHTML;

// 在单词中间设置插入符号位置
var words = content.split(" ");
var insertIndex = Math.floor(words.length / 2); // 设置插入符号位置为单词数组的中间位置

// 插入符号
words[insertIndex] += " 插入符号 "; // 在单词中间添加插入符号

// 更新div的innerHTML
divElement.innerHTML = words.join(" ");

请注意,以上代码仅为示例,实际应用中可能需要根据具体需求进行适当修改。此外,对于可编辑的div元素,还需要考虑用户输入和编辑的情况,以保证插入符号的位置正确。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端富文本基础及实现

空白 HTML 文档嵌入一个 iframe,并将 designMode 属性设置为 on,文档就会变成可编辑,实际编辑则是 iframe 内 body 元素。...Selection 对象表示用户选择文本范围或插入符号的当前位置。它代表页面文本选区,可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。...想删除插入,可获取新 Selection 对象,利用此时位置所在 dom 元素方法插入对应文字、元素。...标签, insertImage 光标位置插入图片 图片 URL 链接 insertParagraph 光标位置插入元素 null italic 切换选中文本斜体样式 null styleWithCSS...编辑区域可通过获取编辑元素 innerHTML 拿到对应富文本数据,存入数据库。 网络请求富文本数据设置为富文本容器 innerHTML,即可展示富文本内容

4.5K50

【实战】我是如何在输入框实现@ At功能

) 当前需求拆解 按住shift + @ 时候,弹出通知列表 选择时 @用户标签插入当前光标位置 生成@用户标签规则是:高亮、携带用户ID、一键删除信息、不可以编辑。...// 需要在字符前插入一个空格否则、换行与两个@标签连续时候导致无法删除标签 let spanNode = document.createElement('span'); spanNode.innerHTML...contents.length) { const index = contents.length - 1 // 文本拆入换行符号兼容...获取光标的坐标文本位置 caret-pos 从 textarea、contentedtiable 或 iframe 正文中获取插入符号/光标的位置/偏移量 import { position, offset...这个功能只是开发挤出来、很多东西写不够好、不够完善,希望本文能帮助您在开发节约一点时间。也欢迎大家提出踊跃反馈、希望能与大家共进步,加油~

2.6K20
  • 2024全网最全面及最新且最为详细网络安全技巧 七之 XSS漏洞典例分析POC以及 如何防御和修复(5)———— 作者:LJS

    代码不多,总结一下大概过滤过程是: 先正则直接去除注释与onload属性内容 将上面处理内容,赋值给一个新创建divinnerHTML属性,建立起一颗DOM树 用黑名单删除掉一些危险DOM节点...这里处理比较粗暴,而且也无法使用HTML编码来绕过关键字——原因是,字符串赋值给innerHTML时候,HTML属性编码已经被解码了,所以属性检查时候看到是解码内容。...这里所谓“条件竞争”,竞争其实就是这个onload属性在被放进DOM树开始,到在后续移除函数将其移除中间这段时间——只要这段代码被放进innerHTML立即触发onload,这样即使后面它被移除了...找到非缓存键部分输入,接下来步骤是评估您可以对它做多少破坏,然后尝试将其存储缓存。如果失败,则您需要更好地了解缓存工作方式,并且重试之前,搜索缓存目标页面。...= wrap[ 1 ] + jQuery.htmlPrefilter( elem ) + wrap[ 2 ]; 有意思是,这个正则表达式匹配之后会重新生成一对标签(区别于直接调用innerHTML

    8610

    office相关操作

    ,可设置起始位置find():找出特定字母单元格位置,重复只返回第一个找到位置,此时指定开始位置len():单元格内字母数23hlookup()index():返回指定行列元素内容match...注意:因为两次插入,第二次插入会在插在第一次插入题注上面,所以要注意“先插入英文题注,再插入中文”参考博客word何在双栏排版插入单栏排版内容需要单栏排版部分,将光标定位到该部分开头和结尾...如果需要,你还可以继续该页面上进行格式调整或内容编辑。需要注意是,插入分隔符,分节符前后将保持原有的双栏排版,而之间将变为单栏排版。如果你想恢复双栏排版,你可以删掉分节符。...,一放上去格式乱很,英文语句随意换行造成很难看,所以今天就教大家Word设置英文单词不自动换行方法。  ...2、弹出段落设置窗口中切换到“中文版式”选项卡,勾选“允许西文单词中间换行”即可。

    10610

    Web APIs第三天

    追加节点 要想在界面看到, 还得插入到某个父元素 1....,生成渲染树(Render Tree) 进行布局 Layout(回流/重排):根据生成渲染树,得到节点几何信息(位置,大小) 进行绘制 Painting(重绘): 根据计算和获取信息进行整个页面的绘制...重绘和回流(重排) 会导致回流操作: 页面的首次刷新 浏览器窗口大小发生改变 元素大小或位置发生改变 改变字体大小 内容变化(:input框输入,图片大小) 激活css伪类(::hover...发布内容不能为空 // 点击button判断 内容为空 则提示不能输入为空 并直接return 不能为空 // 使用字符串.trim()去掉首尾空格 // 并将表单value值设置为空字符串 同时字数设置为...重置表单域内容为空 text.value = '' useCount.innerHTML = 0 }) ---- 本节单词: parentNode children nextElementSibling

    58450

    技术|必知必会 Vim 编辑器基础命令

    你可以文件中移动并且修改内容,剪切、复制和粘贴文件一部分,同时发出命令执行更多操作(按ESC键进入命令模式) 插入模式:插入模式用于在给定文档位置插入文本(按i键进入插入模式) 我如何知道我正使用哪种...i–光标之前插入a–光标之后插入I–光标所在行开头插入。当光标位于行中间时,这个键很有用A–光标所在行末尾插入。...o–光标所在行下面插入新行O–光标所在行上面插入新行ea–单词末尾插入拷贝、粘贴和删除一行yy–复制一行p/P–将内容粘贴到光标之后/之前dd–删除一行dw–删除一个单词Vim搜索和替换匹配模式...:%s/旧模式/新模式/gc–逐个询问是否文件旧模式替换为新模式如何在Vim编辑跳转到特定行你可以根据需求以两种方式达到该目的,如果你不知道行号,建议采用第一种方法。...通过打开文件并运行下面的命令来显示行号 :setnumber当你设置好显示行号,按:n跳转到相应行号。

    1.3K40

    vim快捷键大全

    nJ:连接后面的n行 u:撤销上一次操作 U:撤销当前行所有修改 ctrl+r:对撤消撤消 i 光标前插入 I 在行首插入 a 光标插入 A 在行末插入 o:在当前行下面另起一行...:放弃更改,然后相当于重新打开 :help:帮助,可用ZZ退出帮助窗口 vimNyy可以复制光标N行。有时我们不容易得出行数,这时可以用做标记方法来制定复制范围:   1....重复执行命令 :10,$ w test2.cpp 取行10到最后一行内容,保存到test2.cpp :r class/User.hpp 读取文件内容插入到当前行后面 dw:删除一个单词...粘贴最后第二次删除内容 yy:复制一行  yaw: 复制一个单词,光标单词任意位置 ynw: 复制N个单词 ynj: 向下复制n行 ynk: 向上复制...-:到上一行第一个字符。 n|:移动到当前行第n列 e:移到单词结尾 E:移到单词结尾(忽略标点符号) ( ) { } [[ ]] 这几个对编程作用不大,忽略。

    2.1K40

    【总结】vim命令使用总结,该来还是躲不掉啊晕

    普通模式下,从键盘输入任何字符都被当作命令来解释。普通模式下没有任何提示符,输入命令立即执行,不需要回车,而且输入字符不会在屏幕上显示出来。 编辑模式 编辑模式主要用于文本编辑。...- 移动到上个单词开头(单词含标点) ge - 移动到上个单词结尾 gE - 移动到上个单词结尾(单词含标点) % - 跳转到配对符号(默认支持配对符号组:: '()', '{}', '[]' -...控制 Ctrl + n - 插入模式下,光标之前插入自动补全下一个匹配项 Ctrl + p - 插入模式下,光标之前插入自动补全上一个匹配项 Ctrl + rx - 插入寄存器 x 内容...yiw - 复制光标处单词 yaw - 复制光标处单词及其前后空格 y$ or Y - 复制, 从光标位置到行末 p - 光标粘贴 P - 光标前粘贴 gp - 光标粘贴并把光标定位于粘贴文本之后... . - 上次插入文本  - - 上次剪切短于一行文本  = - 表达式寄存器  _ - 黑洞寄存器 标记 :marks - 标记列表 ma - 设置当前位置为标记 a `a - 跳转到标记

    54221

    linux之文本编辑

    通过设置,vim会自动检测文件内容类型,并以不同颜色进行高亮显示,注释变成蓝色,关键字变成褐色,而字符串变成红色等,与vi传统黑白显示模式相比,vim更易读易用。...4.2.3 打开文件、保存文件和退出 vi 编辑器 存盘和退出、设置行号操作等功能,输入“:”进入底线模式。 屏幕最下面一行将出现一个“:”符号。...(最常用) a:在当前光标所在一个位置插入,开始输入字符(最常用) o:在当前光标所在行下面新创建一行,并在行第一个位置开始输入字符。(最常用) 这并不是全部进入方法,但却是最常用。...:3x,删除光标所在位置3个字符 dw (常用) 从光标所在位置开始,向右删除单词。...下面内容符号“>”为键盘上大于号,“<”为键盘上小于号。

    2.2K20

    干货 | 前端模板引擎知多少

    1 捕获特定语法 生成AST过程涉及到编译器原理,一般经过以下过程: 语法分析 语法分析任务是词法分析基础上将单词序列组合成各类语法短语,“程序”,“语句”,“表达式”等等。...例如我们可以将以下这样DOM进行捕获: 123 456789 捕获我们或许可以得到这样一个对象:...不是的,在这个过程我们可以实现一些功能: 1. 排除无效DOM元素,并在构建过程可进行报错。 2. 使用自定义组件时候,匹配出来。 3. 方便地实现数据绑定、事件绑定等功能。 4....AST生成模板 1 生成模板方法 我们捕获得到一个AST树结构,会将其生成对应DOM。...在这个过程,最突出也就是虚拟DOM,它解决了常见局部数据更新问题,例如数组中值位置调换、部分更新。一般来说计算过程如下: 1. 用JS对象模拟DOM树。

    1.1K30

    C1能力认证训练题解析 _ 第四部分 _ Web进阶「建议收藏」

    (2)ul最后一个li元素添加一个新li元素,li元素文字内容为input元素输入值,请补全横线处代码(依次填写答案,使用中文逗号「,」隔开) <input type="text...节点写入常用方式: 名称 描述 <em>innerHTML</em> 返回元素<em>中</em><em>的</em>html<em>内容</em>,通过赋值,可<em>设置</em>元素<em>中</em><em>的</em>html<em>内容</em> innerText 返回元素<em>中</em><em>的</em>文本<em>内容</em>,通过赋值,可<em>设置</em>元素<em>中</em><em>的</em>文本<em>内容</em> document.write...() 将html字符串写入到文档<em>中</em> (1)<em>在</em><em>div</em><em>中</em><em>插入</em>文字<em>内容</em>为“加油,我要通过C认证”<em>的</em>p元素,请补全横线处代码。.../script> 答案:<em>innerHTML</em> 此处需要<em>插入</em>一个p元素,<em>插入</em><em>的</em>值为字符串,所以需要使用可以解析html字符串<em>的</em>DOM属性,返回元素<em>中</em><em>的</em>html<em>内容</em>。...(3)<em>在</em>第一行元素<em>后</em><em>插入</em>第二行元素,请补全横线处代码。

    2K20

    关于前端模板引擎

    捕获特定语法生成 AST 过程涉及到编译器原理,一般经过以下过程:语法分析。语法分析任务是词法分析基础上将单词序列组合成各类语法短语,“程序”,“语句”,“表达式”等等。...例如我们可以将以下这样 DOM 进行捕获: 123 456789捕获我们或许可以得到这样一个对象:thisDiv =...不是的,在这个过程我们可以实现一些功能:排除无效 DOM 元素,并在构建过程可进行报错。使用自定义组件时候,匹配出来。方便地实现数据绑定、事件绑定等功能。为虚拟DOM Diff过程打下铺垫。...AST 生成模版生成模版方法我们捕获得到一个 AST 树结构,会将其生成对应 DOM。...数据更新 Diff说到数据更新 Diff,更多则是Diff + 更新模板这样一个过程。在这个过程,最突出也就是虚拟 DOM,它解决了常见局部数据更新问题,例如数组中值位置调换、部分更新。

    32520

    40行代码内实现一个React.js

    另外注意,本文所实现代码只用于说明教学展示,并不适用于生产环境。代码托管这个 仓库。心急同学可以先去看代码,但本文会从最基础内容开始解释。...3、实现复用性 所以现在我们来想办法解决这个问题,让这个点赞功能具有较好复用效果,那么你同事们就可以轻松自在地使用这个点赞功能。 3.1 结构复用 现在我们来重新编写这个点赞功能。...返回 DOM 元素之前会先给这个 DOM 元素上添加事件再返回。 因为现在 render 返回是 DOM 元素,所以不能用 innerHTML 暴力地插入 wrapper。...4.2 重新插入 DOM 元素 上面的改进不会有什么效果,因为你仔细看一下就会发现,其实重新渲染 DOM 元素并没有插入到页面当中。...div = document.createElement('div') div.innerHTML = domString return div } 6、总结 你到底能从文章获取到什么

    2.5K30

    javaScript 原生DOM节点操作(最实用dom节点操作大全)

    textNode = document.createTextNode("hello"); 获取文本节点 var textNode = div.childNodes[0]; 删除起始位置开始num个值...textNode.deleteData(starNum,num); 尾部添加内容 textNode.appendData("后面哦"); 中间插入内容 te.insertData(1,"中间哦"); innerHTML...看出来了吧,innerHTML和innerText是有本质上区别的,innerHTML写入内容可以解析成标签,而innerText写入内容只能当作是文本浏览器显示。...简单讲,innerHTML可以某种特定环境下重构某个元素节点DOM结构,而innerText只能修改文本值 总结 原生DOM节点操作还是非常简单实用,除了单词长了一点以外好像也没有什么明显缺点...本文为作者原创,手码不易,允许转载,转载请以链接形式说明文章出处。

    1.8K20

    这可能是最全最实用Vim操作集合

    全文搜索你输入关键字 # 斜杠 / 是正向往下搜索,? 是反向往上搜索你关键字 # 或者使用 shift+* 或者 shift+# 可以自动匹配光标处单词进行搜索 /想要搜索内容 ?...,对于我们常见正则比如: 特殊符号 描述 ^ 匹配输入字符串开始位置,除非在方括号表达式中使用,当该符号方括号表达式中使用时,表示不接受该方括号表达式字符集合。...这里 i 表示插入 去除注释: 按 ctrl + v 进入可视模式 将所有注释符号选中 按下 x 或 d 按键,则会取消所有选中行注释 5.3 多行末尾追加内容 比如我们敲代码过程中发现每一行末尾都少加了分号...(注意你当前终端里): exit 7.2 Vim 锁定 以前 Windows 系统时候,喜欢编辑按 Ctrl+s 来保存文档,这是个很好习惯,但是 Vim 却不是了,因为这个操作正常模式下会让你...7.4 编辑二进制文件 对于一些二进制文件, 比如网络传输我们要对接收到数据进行字节分析,又比如分析码流文件 h264 文件等,都需要查看二进制内容,vim 也提供二进制文件查看和编辑功能: #

    2.1K20

    JS设置标签内容和样式

    本文内容概要: 1 获取标签 2 设置样式 3 获取/设置标签内容 4 课程小结 5 课后练习 1 获取标签 讲解获取标签之前,我们需要来理解一个概念,什么是对象(Object)?...注意:元素.style.属性,“属性”只能接受把CSS属性(由一个以上单词组成,用“-”划线连接CSS属性)转成小驼峰命名形式,:font-size——>fontSize; 例如:eleObj.style.fontSize...当然可以,我们可以使用innerHTML属性实现修改或获取标签内容。...- 梦幻雪冰'; // 输出修改标签内容 console.log(desEle.innerHTML); // 利用innerHTML属性添加标签 introEle.innerHTML...代码分析: 获取到标签是对象,通过对象.属性形式来调用innerHTML属性,实现修改或获取标签内容innerHTML属性不仅仅可以添加文本内容,还可以添加HTML标签,:introEle.innerHTML

    20.4K90

    http:blog.csdn.netu010105969articledetails53541088

    js alert in js’}); AppModel是我们注入对象,“()”内容是我们传递给客户端数据。...新改变 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客: 全新界面设计 ,将会带来全新写作体验; 创作中心设置你喜爱代码高亮样式...1 功能; 增加了 多屏幕编辑 Markdown文章功能; 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能,功能按钮位于编辑区域与预览区域中间; 增加了 检查列表 功能。...+ F 替换:Ctrl/Command + G 合理创建标题,有助于目录生成 直接输入1次#,并按下space,将生成1级标题。...如何插入一段漂亮代码片 去博客设置页面,选择一款你喜欢代码片高亮样式,下面展示同样高亮 代码片. // An highlighted block var foo = 'bar'; 生成一个适合你列表

    1.6K30

    Linux:常用软件、工具和周边知识介绍

    复制和粘贴: 使用 yw 复制光标所在位置单词末尾内容,yy 复制整行。 使用 p 粘贴已经复制或删除内容到光标位置。 替换: 使用 r 替换光标所在位置字符。...撤销和重做: 使用 u 撤销上一步操作,Ctrl + r 重做上一步操作撤销。 更改: 使用 cw 更改光标所在位置单词末尾内容,c#w 更改指定数量单词。...2.2.2插入模式(Insert mode) Vim 编辑插入模式(Insert Mode)是用于输入和编辑文本模式。...插入模式下,你可以直接在文本插入编辑和删除字符,就像在普通文本编辑器中一样。 插入模式下,你可以自由地编辑文本,直到按下 Esc 键退出插入模式,回到普通模式(Normal Mode)为止。...所谓头文件展开,本质是预处理时候,将头文件内容拷贝至源文件 预处理器处理文件通常具有更大体积,并且不包含注释和空行。

    23010
    领券