-
2022-06-17 15:37:32
let arr = [
{id:1,name:‘Tom‘,sex:0},
{id:2,name:‘Jerry‘,sex:1},
{id:3,name:‘Danny‘,sex:1},
{id:4,name:‘Jenny‘,sex:0},
{id:6,name:‘Lee‘,sex:0},
{id:5,name:‘Bob‘,sex:1},
{id:7,name:‘John‘,sex:0},
{id:8,name:‘Marry‘,sex:1}
];for(let i=arr.length-1;i>=0;i--){ if(arr[i].sex === 1){ arr.splice(i,1); }
更多相关内容 -
JS 文本框内输入内容添加在页面与删除
2022-03-17 20:49:17文本框内输入文字,点击添加按钮·就可添加至页面内,点击删除即可依次删除 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> &...文本框内输入文字,点击添加按钮·就可添加至页面内,点击删除即可依次删除
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> #text_1 { border-radius: 10px; height: 50px; width: 500px; font-size: 20px; } #shuru { width: 500px; margin: 0 auto; text-align: center; } #adds,#removes{ width: 100px; height: 50px; font-size: 20px; border-radius: 10px; background-color: white; } #kuang{ font-size: 20px; } </style> <body> <div id="shuru"> <input type="text" name="" id="text_1" value="" placeholder="请输入内容" /><span id=""> </span> <br><br> <input type="button" name="" id="adds" value="添加评论" onmousedown="anxia(this);" onmouseup="tanqi(this);"/> <input type="button" name="" id="removes" value="删除评论" onmousedown="anxia(this);" onmouseup="tanqi(this);"/> </div> <hr /> <div id="kuang"> </div> <script type="text/javascript"> var num = 0; // function pankong(obj){ // var objs=obj.value; // if(objs==null||objs==""||objs==undefined){ // obj.nextElementSibling.innerHTML="请输入内容" // } // } document.getElementById("text_1").onfocus = function() { this.style.outline = "1px solid blue" } document.getElementById("text_1").onblur = function() { this.style.outline = "1px solid black" } function anxia(obj){ obj.style.backgroundColor="pink" } function tanqi(obj){ obj.style.backgroundColor="white" } document.getElementById("adds").onclick = function() { var tx = document.getElementById("text_1"); if ((tx.value) == null || (tx.value) == "" || (tx.value) == undefined) { tx.nextElementSibling.innerHTML = " 请输入内容!" tx.nextElementSibling.style.fontSize = "20px" tx.nextElementSibling.style.color = "red" } else { var p = document.createElement("p") p.innerHTML = tx.value + "<hr>"; document.getElementById("kuang").appendChild(p); num++ } tx.value = "" } document.getElementById("removes").onclick = function() { var a = document.getElementById("kuang"); if (num == 0) { alert("真的一滴都没了!") } else { a.lastElementChild.remove(); num--; } } </script> </body> </html>
-
summernote富文本框整合图片上传和删除
2019-07-17 17:11:33summernote富文本框整合图片上传和删除,后台使用的阿里云oss文件服务器,此文件为前端代码 -
jquery删除指定的html标签并保留标签内文本内容的方法
2020-12-10 19:56:08例如有这样一段html代码: 代码如下:软件开发网演示...我们希望删除这段html代码里面的一对标签,但是要保持里面的内容不被删除,这里我们用jquery处理,详细的jQuery代码: 代码如下:[removed][removed] <script -
js文本超出字符自动删除
2013-10-21 10:47:57js 效果 文本框超出字符提示并且自动回删 -
未使用的样式删除:删除未使用的图层和文本样式
2021-02-06 11:27:04删除未使用的图层和文本样式。用法cmd option shift u-删除未使用的图层和文本样式安装自动如果您已安装其中之一,请在 , 或搜索未使用的样式移除器。 安装后,当有可用的更新(版本0.1和更高版本)时,Sketch会... -
Typewriter.js:一个jQuery插件,用于动画输入和删除文本
2021-05-11 23:58:13一个用于为键入和删除文本设置动画的jQuery插件。 使用方法: 要使用Typewriter.js,只需将Typewrite函数链接到jQuery选择器,如下所示: $('p').Typewrite(); 优化和定制: 通过将对象传递给Typewrite函数,... -
js富文本实现
2020-12-20 16:59:27转载来源:...富文本编辑,又称为WYSIWYG (What You See Is What You Get所见即所得),指在网页中编辑富文本内容。本文将详细介绍如何通过javascript实现富文本编辑方式有两种编...转载来源:https://www.cnblogs.com/xiaohuochai/p/5884206.html
一说起富文本,人们第一印象就是像使用word一样,在网页上操作文档。实际上差不多就是这样。富文本编辑,又称为WYSIWYG (What You See Is What You Get所见即所得),指在网页中编辑富文本内容。本文将详细介绍如何通过javascript实现富文本编辑
方式
有两种编辑富文本的方式,一种是使用iframe元素,另一种是使用contenteditable属性
【1】iframe
在页面中嵌入一个包含空HTML页面的iframe。通过设置designMode属性,这个空白的HTML页面可以被编辑,而编辑对象则是该页面
元素的HTML代码designMode属性有两个可能的值:"off"(默认值)和"on"。在设置为"on"时,整个文档都会变得可以编辑
只有在页面完全加载之后才能设置designMode属性。因此,在包含页面中,需要使用onload事件处理程序
[注意]此方法必须在服务器端才能执行,否则会提示跨域安全提示
window.οnlοad= function(){
frames['wysiwyg'].document.designMode = 'on';
}
【2】contenteditable
把contenteditable属性应用给页面中的任何元素,然后用户立即就可以编辑该元素
设置document.designMode='on'时,页面的任意位置都可以编辑;使用contenteditable='true'则只对具体元素和其包含的元素起作用
[注意]一定要区分contenteditable和contentEditable。contenteditable是元素的特性,而contentEditable是对象的属性
打开富文本编辑
关闭富文本编辑
btn1.onclick = function(){wysiwyg.contentEditable = true;}
btn2.onclick = function(){wysiwyg.contentEditable = false;}
命令
与富文本编辑器交互的主要方式,就是使用document.execCommand()。这个方法可以对文档执行预定义的命令,而且可以应用大多数格式
document.execCommand(String aCommandName, Boolean aShowDefaultUI, String aValueArgument)方法需要传递3个参数
aCommandName表示要执行的命令名称,不可省略
aShowDefaultUI表示是否展示用户界面,默认为false,可省略
aValueArgument表示额外参数值,默认为null,可省略
[注意]为了确保浏览器兼容性,第二个参数应始终设置为false,因为firefox在该参数为true时抛出错误
段落格式
居中 document.execCommand('justifyCenter');
左对齐 document.execCommand('justifyLeft');
右对齐 document.execCommand('justifyRight');
添加缩进 document.execCommand('indent');
去掉缩进 document.execCommand('outdent');
测试内容居中
左对齐
右对齐
添加缩进
去掉缩进
var btns = document.getElementsByTagName('button');
for(var i = 0; i < btns.length; i++){
btns[i].onclick = function(){
document.execCommand(this.getAttribute('data-name'));
}
}
文本格式
字体类型 document.execCommand('fontname',false,sFontName)
字体大小 document.execCommand('fontsize',false,sFontSize)
字体颜色 document.execCommand('forecolor',false,sFontColor)
背景色 document.execCommand('backColor',false,sBackColor)
加粗 document.execCommand('bold');
斜体 document.execCommand('italic');
下划线 document.execCommand('underline');
测试内容宋体
大字体
红色字体
浅绿背景
加粗
斜体
下划线
var btns = document.getElementsByTagName('button');
for(var i = 0; i < btns.length; i++){
btns[i].onclick = function(){
document.execCommand(this.getAttribute('data-name'),false,this.getAttribute('data-value'));
}
}
编辑
复制 document.execCommand('copy');
剪切 document.execCommand('cut');
粘贴 document.execCommand('paste');(经测试无效)
全选 document.execCommand('selectAll');
删除 document.execCommand('delete');
后删除 document.execCommand('forwarddelete');
清空格式 document.execCommand('removeFormat');
前进一步 document.execCommand('redo');
后退一步 document.execCommand('undo');
打印 document.execCommand('print');(对firefox无效)
测试内容复制
剪切
粘贴
全选
删除
后删除
清空格式
前进一步
后退一步
打印
var btns = document.getElementsByTagName('button');
for(var i = 0; i < btns.length; i++){
btns[i].onclick = function(){
document.execCommand(this.getAttribute('data-name'));
}
}
插入
插入标签 document.execCommand('formatblock',false,elementName);
插入
document.execCommand('inserthorizontalrule');插入
- document.execCommand('insertorderedlist');
插入
- document.execCommand('insertunorderedlist');
插入
document.execCommand('insertparagraph');
插入图像 document.execCommand('insertimage',false,URL);
增加链接 document.execCommand('createlink',false,URL);
删除链接 document.execCommand('unlink');
测试内容插入div
插入hr
插入ol
插入ul
插入p
插入图像
增加链接
删除链接
var btns = document.getElementsByTagName('button');
for(var i = 0; i < btns.length; i++){
btns[i].onclick = function(){
document.execCommand(this.getAttribute('data-name'),false,this.getAttribute('data-value'));
}
}
选区
【getSelection()】
在富文本编辑器中,使用getSelection()方法,可以确定实际选择的文本。这个方法是window对象和document对象的属性,调用它会返回一个表示当前选择文本的Selection对象。每个Selection对象都有下列属性
[注意]IE8-浏览器不支持
anchorNode:选区起点所在的节点
anchorOffset:在到达选区起点位置之前跳过的anchorNode中的字符数量
focusNode:选区终点所在的节点
focusOffset:focusNode中包含在选区之内的字符数量
isCollapsed:布尔值,表示选区的起点和终点是否重合
rangeCount:选区中包含的DOM范围的数量
Selection对象的这些属性并没有包含多少有用的信息。好在,该对象的下列方法提供了更多信息,并且支持对选区的操作
addRange(range):将指定的DOM范围添加到选区中
collapse(node,offset):将选区折叠到指定节点中的相应的文本偏移位置
collapseToEnd():将选区折叠到终点位置
collapseToStart():将选区折叠到起点位置
containsNode(node):确定指定的节点是否包含在选区中
deleteFromDocument():从文档中删除选区中的文本,与document.execCommand("delete",false,null)命令的结果相同
extend(node,offset):通过将focusNode和focusOffset移动到指定的值来扩展选区
getRangeAt(index):返回索引对应的选区中的DOM范围
removeAllRanges():从选区中移除所有DOM范围。实际上,这样会移除选区,因为选区中至少要有一个范围
reomveRange(range):从选区中移除指定的DOM范围
selectAllChildren(node):清除选区并选择指定节点的所有子节点
toString():返回选区所包含的文本内容
Selection对象的这些方法都极为实用,它们利用了DOM范围来管理选区。由于可以直接操作选择文本的DOM表现,因此访问DOM范围与使用execCommand()相比,能够对富文本编辑器进行更加细化的控制。下面来看一个例子
var selection = document.getSelection();
//取得选择的文本
var selectionText = selection.toString();
//取得代表选区的范围
var range = selection.getRangeAt(0);
//突出显示选择的文本
var span = document.createElement("span");
span.style.backgroundColor = "yellow";
range.surroundContents(span);
以上代码会为富文本编辑器中被选择的文本添加黄色的背景。这里使用了默认选区中的DOM范围,通过surroundContents()方法将选区添加到了带有黄色背景的元素中
HTML5将getSelection()方法纳入了标准,IE8-浏览器不支持DOM范围,但可以通过它支持的selection对象操作选择的文本。IE中的selection对象是document的属性,要取得富文本编辑器中选择的文本,首先必须创建一个文本范围,然后再像下面这样访问其text属性
var range = document.selection.createRange();
var selectedText = range.text;
虽然使用IE的文本范围来执行HTML操作并不像使用DOM范围那么可靠,但也不失为一种有效的途径。要像前面使用DOM范围那样实现相同的文本高亮效果,可以组合使用htmlText属性和pasteHTML()方法
var range = document.selection.createRange();
range.pasteHTML("");
以上代码通过htmlText取得了当前选区中的HTML,然后将其放在了一对标签中,最后又使用pasteHTML()将结果重新插入到了选区中
表单提交
因为富文本编辑不是使用表单控件实现的,因此富文本编辑器中的HTML不会被自动提交给服务器,而需要手工来提取并提交HTML。为此,通常可以添加一个隐藏的表单字段,让它的值等于从iframe或使用contenteditable属性的元素中提取出的HTML。具体来说,就是在提交表单之前提取出HTML,并将其插入到隐藏的字段中。下面就是通过表单的onsubmit事件处理程序实现上述操作的代码
form.onsubmit = function(e){
e = e || event;
var target = e.target || e.srcElement;
target.elements["comments"].value = frames["richedit"].document.body.innerHTML;
}
在此,通过文档主体的innerHTML属性取得了iframe中的HTML,然后将其插入到了名为"comments"的表单字段中。这样可以确保恰好在提交表单之前填充"comments"字段。如果在代码中通过submit()来手工提交表单,那么一定不要忘记事先执行上面的操作。对于contenteditable元素,也可以执行类似操作
form.onsubmit = function(e){
e = e || event;
var target = e.target || e.srcElement;
target.elements["comments"].value = document.getElementById('wysiwyg').innerHTML;
}
-
vue删除html内容的标签样式实例
2020-12-29 13:56:05使用: 删除标签样式: var striphtml = require('js-striphtml'); striphtml.striptags('<body>I am a <b>HTML</b> string.<div class=clear></div></body>', [ 'b' ]); // Returns I am a <b>... -
JS创建、添加、删除元素节点 添加文本节点
2021-10-08 11:33:151.createElement (创建一个新的节点 需要和appendChild配和使用) var element= doucument.createElement('tr'); 2.appendChild (在元素末尾添加一个子节点) element.appenChild(tr) 3.createTextNode ...1.createElement (创建一个新的节点 需要和appendChild配和使用)
var element= doucument.createElement('tr');
2.appendChild (在元素末尾添加一个子节点 )
element.appenChild(tr)
3.createTextNode (文本节点)
var element = document.createTextNode("你好") tr.appchild(elenemt) //将文本节点添加到tr里面
4.removeChild (删除元素节点)
element.parentNode.removeChild(element) 删除节点
5.insertBefore (创建新的列表)
elenemt.insertBefore(newnode,newnode) //这两个元素是必须的 newnode要插入的节点 //newnode 要添加新的子节点前的节点
-
jQuery的添加删除功能(添加文本,列表,删除元素,清空内容)
2020-11-07 19:36:29添加文本内容,列表 可以使用jQuery的.append/.prepend/.after来进行操作,方法...添加文本内容,列表的JS代码 <script type="text/javascript" src="jquery.min.js"></script> <script type="text/java -
DOM和js实现删除结点,增加结点,和设置文本内容可修改(点击删除订单后,应该少一行tr)
2021-11-15 22:14:27DOM和BOM分别是文档对象模型和浏览器对象模型,可以看作是一个对象,里面包含有一些方法和属性,以便于更方便操作文档对象和浏览器对象,前者主要有增删改,后者主要有跳向莫一网址或者获取...订单增加删除操作</ti -
JS如何获取、设置、删除、添加 select下拉菜单的value以及文本内容
2020-05-22 18:53:11JS如何获取和设置select下拉菜单的value以及文本内容 -
JS函数复制文本内容到剪切板(兼容所有浏览器)
2022-04-19 11:03:20应用:当我们需要一个点击事件把 文本内容 复制到剪切板的时候,只需要在自己定义在工具类.js 文件中,引用一下就行,我定义在utils.js中 src/utils/tool.js 中定义 // 复制内容到剪切板, 成功返回true export ... -
javascript中获取元素标签中间的内容的实现方法
2020-11-21 23:50:11使用ajax,通过会把服务器端响应获取到reponseText或者reponseXML中的信息,以某种方法动态的写到div和span标记中,这样,可以在无刷新的情况下,改变页面内容的显示。 通过javascript进行动态的修改,修改的方法有... -
diff.js:一个用于区分两个文本字符串的小型 JavaScript 库
2021-06-05 06:36:02目前,这会解析文本的差异,并使用 $del$ 和 $ins$ 变量标记删除和插入。 我可以为删除和插入实现自定义标记,但就目前而言,这适用于我使用它的目的。 例如 differ . parse ( 'one two three' , 'two three four... -
typewrite:一个javascript打字机库,可动画化页面上文本的键入,删除和选择
2021-05-06 04:24:56一个javascript打字机库,可动画化页面上文本的键入,删除和选择 演示版 看 。 安装 typewrite是一个jQuery插件,因此需要在jQuery之后HTML中包含它。 例如: 来自回购: < script type = "text/javascript" ... -
Linux的文本编辑和文本内容查看命令
2021-05-14 01:10:48Linux的文本编辑和文本内容查看命令1、文本编辑命令vi:用于编辑文本文件,基本上可以分为三种模式,分别是一般模式、编辑模式、命令行模式。一般模式:当编辑一个文件时,刚进入文件就是一般模式。编辑模式:在一般... -
three-spritetext:ThreeJS的基于Sprite的文本组件
2021-04-27 20:56:55由于正在使用精灵,因此文本将始终面向相机,并且其方向相对于相机固定。 快速开始 import SpriteText from 'three-spritetext'; 或者 var SpriteText = require('three-spritetext'); 甚至 [removed][removed] ... -
js实现html标签、文本的隐藏、显示、删除,添加
2021-12-23 13:35:10append()——在被选元素的结尾插入内容 prepend()——在被选元素的开头插入内容 after()——在被选元素之后插入内容 before()——在被选元素之前插入内容 实例: $("p").append("追加文本"); $("p").prepend("在... -
如何使用 JavaScript 将文本复制到剪贴板?
2022-06-14 09:09:39如何使用 JavaScript 将文本复制到剪贴板? -
js实现文本段落增删改查
2022-05-10 19:11:57JS <script> function addNode(){ var box = document.getElementById("box") var p = document.createElement("p")//新建一个p元素 var txt = document.createTextNode("段落三") p.appendChil -
js 隐藏文本显示内容
2021-03-31 20:08:29用js隐藏文本value提示内容 <style> input{ width:300px; height:20px; color: #888; } </style> <body> <input type="text" value="手机"> <script> // 获取元素 var text... -
js复制指定文本内容工具方法
2021-08-12 12:29:32// 传入要复制的内容即可 copy(data) { let input = document.createElement("input"); // 直接构建input input.setAttribute("readonly", "readonly"); //设置只读,否则移动端会有键盘弹出 input.value = data... -
js删除元素对象或其内容(div、ulli、img、input等)
2021-06-10 16:26:01在 javascript 中,删除元素其实是移除元素,用 removeChild() 方法,元素不能自己删除自己,所以只能用其父元素将其删除,所以用移除孩子的方法。无论用js删除页面级元素div,还是删除列表级元素 ulli、ulol,... -
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2020-10-18 13:35:07主要介绍了JavaScript DOM元素常见操作,包括针对dom元素的添加、删除、修改等相关操作实现技巧与注意事项,需要的朋友可以参考下 -
remove-markdown:从文本中剥离Markdown内容
2021-02-04 06:54:04remove-markdown是一个node.js模块,它将从文本中删除(剥离)Markdown格式。 Markdown格式意味着几乎所有看起来不像常规文本的东西,例如方括号,星号等。 我什么时候需要它? 典型的用例是显示某些Markdown文本... -
js 去除富文本中的img、标签_微信小程序 wxParese框架之富文本处理
2020-12-24 00:49:44微信小程序 wxParese框架之富文本处理前因:微信小程序并没有为个人开发者提供webview等可以解析html的组件,原展示类文本没有办法图文并茂的原生展示。wxParse主要目的就是弥补富文本解析空缺的问题,图文并茂的... -
js 获取元素文本_JS第三天
2020-11-21 08:44:18JS第三天 BOM对象 二、元素节点的操作 创建节点 createElement() 创建一个新的节点,需要传入节点的标签名称,返回创建的元素对象 createTextNode() 创建一个文本节点,可以传入文本内容 ... -
input输入框删除文字效果js代码
2020-06-11 23:12:51一款简单的input输入框删除文字效果js代码,仿百度点击删除搜索框输入文字代码。