精华内容
下载资源
问答
  • 如何用js删除文本内容
    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);
        }
    
    更多相关内容
  • 文本框内输入文字,点击添加按钮·就可添加至页面内,点击删除即可依次删除 <!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 = "&emsp;请输入内容!"
    					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富文本框整合图片上传和删除,后台使用的阿里云oss文件服务器,此文件为前端代码
  • 例如有这样一段html代码: 代码如下:软件开发网演示...我们希望删除这段html代码里面的一对标签,但是要保持里面的内容不被删除,这里我们jquery处理,详细的jQuery代码: 代码如下:[removed][removed] <script
  • js 效果 文本框超出字符提示并且自动回删
  • 删除使用的图层和文本样式。用法cmd option shift u-删除使用的图层和文本样式安装自动如果您已安装其中之一,请在 , 或搜索未使用的样式移除器。 安装后,当有可用的更新(版本0.1和更高版本)时,Sketch会...
  • 一个用于为键入和删除文本设置动画的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');

    插入

    1.   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;

    }

    展开全文
  • 使用删除标签样式: 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>...
  • 1.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的.append/.prepend/.after来进行操作,方法...添加文本内容,列表的JS代码 <script type="text/javascript" src="jquery.min.js"></script> <script type="text/java
  • DOM和BOM分别是文档对象模型和浏览器对象模型,可以看作是一个对象,里面包含有一些方法和属性,以便于更方便操作文档对象和浏览器对象,前者主要有增删改,后者主要有跳向莫一网址或者获取...订单增加删除操作</ti
  • JS如何获取和设置select下拉菜单的value以及文本内容
  • 应用:当我们需要一个点击事件把 文本内容 复制到剪切板的时候,只需要在自己定义在工具类.js 文件中,引用一下就行,我定义在utils.js中 src/utils/tool.js 中定义 // 复制内容到剪切板, 成功返回true export ...
  • 使用ajax,通过会把服务器端响应获取到reponseText或者reponseXML中的信息,以某种方法动态的写到div和span标记中,这样,可以在无刷新的情况下,改变页面内容的显示。 通过javascript进行动态的修改,修改的方法有...
  • 目前,这会解析文本的差异,并使用 $del$ 和 $ins$ 变量标记删除和插入。 我可以为删除和插入实现自定义标记,但就目前而言,这适用于我使用它的目的。 例如 differ . parse ( 'one two three' , 'two three four...
  • 一个javascript打字机库,可动画化页面上文本的键入,删除和选择 演示版 看 。 安装 typewrite是一个jQuery插件,因此需要在jQuery之后HTML中包含它。 例如: 来自回购: < script type = "text/javascript" ...
  • Linux的文本编辑和文本内容查看命令

    千次阅读 2021-05-14 01:10:48
    Linux的文本编辑和文本内容查看命令1、文本编辑命令vi:用于编辑文本文件,基本上可以分为三种模式,分别是一般模式、编辑模式、命令行模式。一般模式:当编辑一个文件时,刚进入文件就是一般模式。编辑模式:在一般...
  • 由于正在使用精灵,因此文本将始终面向相机,并且其方向相对于相机固定。 快速开始 import SpriteText from 'three-spritetext'; 或者 var SpriteText = require('three-spritetext'); 甚至 [removed][removed] ...
  • append()——在被选元素的结尾插入内容 prepend()——在被选元素的开头插入内容 after()——在被选元素之后插入内容 before()——在被选元素之前插入内容 实例: $("p").append("追加文本"); $("p").prepend("在...
  • 如何使用 JavaScript文本复制到剪贴板?
  • JS <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...
  • // 传入要复制的内容即可 copy(data) { let input = document.createElement("input"); // 直接构建input input.setAttribute("readonly", "readonly"); //设置只读,否则移动端会有键盘弹出 input.value = data...
  • javascript 中,删除元素其实是移除元素, removeChild() 方法,元素不能自己删除自己,所以只能其父元素将其删除,所以移除孩子的方法。无论用js删除页面级元素div,还是删除列表级元素 ulli、ulol,...
  • 主要介绍了JavaScript DOM元素常见操作,包括针对dom元素的添加、删除、修改等相关操作实现技巧与注意事项,需要的朋友可以参考下
  • remove-markdown是一个node.js模块,它将从文本删除(剥离)Markdown格式。 Markdown格式意味着几乎所有看起来不像常规文本的东西,例如方括号,星号等。 我什么时候需要它? 典型的用例是显示某些Markdown文本...
  • 微信小程序 wxParese框架之富文本处理前因:微信小程序并没有为个人开发者提供webview等可以解析html的组件,原展示类文本没有办法图文并茂的原生展示。wxParse主要目的就是弥补富文本解析空缺的问题,图文并茂的...
  • JS第三天 BOM对象 二、元素节点的操作 创建节点 createElement() 创建一个新的节点,需要传入节点的标签名称,返回创建的元素对象 createTextNode() 创建一个文本节点,可以传入文本内容 ...
  • 一款简单的input输入框删除文字效果js代码,仿百度点击删除搜索框输入文字代码。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 208,471
精华内容 83,388
关键字:

如何用js删除文本内容