js文字一个个出现有html代码的话怎么解决呢

2017-11-02 04:01:37 522 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

javaScript小案例------js实现文字滚动效果篇原生js实现文字滚动效果阅读详情

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="call"><i id="ggewz"></i></div>
<div id="cccv">电话垂询：<div class="aaxz"><span>1111-1111111</span></div></div>
<script>
var ggewz = document.getElementById("ggewz");
var cccv = document.getElementById("cccv");
var time = null;
var num = 0;
time =setInterval(function(){
ggewz.innerHTML = cccv.innerHTML.substring(0,num++);
},30);
</script>
</body>
</html>
其实只要在页面上打印：电话垂询：1111-1111111
但是这里面包含：<div class="aaxz"><span></span></div>
这些html代码

虽然最终显示效果是文字，但是html代码还是会有个打印的动作出来，如何一个个打印的时候，过滤掉html代码，但是又可以让他打印出现的文字具备html代码的显示效果呢

比如，我的文字是加了红颜色的，我不希望打印<span style="color:#f00;"> 但是却能让它具备红色这个效果

不知道我这样说是不是很复杂

...全文

html+js 识别图片上面文字并生成二维码 Tesseract 的最新版本第 4 版于 2018 年 10 月发布，它包含一个新的 OCR 引擎，该引擎使用基于长短期记忆(LSTM) 的神经网络系统，旨在产生更准确的结果。Tesseract.js 一个几乎能识别出图片中所有语言的JS库。官网：http://tesseract.projectnaptha.com/ 阅读详情

qingwadaxia_1

JavaScript 87,984 成员 224,681 内容

+ 关注 + 加入社区

切换为时间正序

天际的海浪 2017-11-02

打赏
举报


<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
  <div class="call"><i id="ggewz"></i></div>
		<div id="cccv"><span style="color: #0f0;">电话垂询：</span><div class="aaxz"><span style="color: #f00;">1111</span>-<span style="color: #00f;">1111111</span></div></div>
		<script>
	var ggewz = document.getElementById("ggewz");
	var cccv = document.getElementById("cccv");
	var time = null;
	var num = 0;
	time =setInterval(function(){
		var str1 = cccv.innerHTML.match(new RegExp("((<.+?>|[\r\n])*[^<>]?){"+(num++)+"}"))[0];
		var str2 = cccv.innerHTML.slice(str1.length).replace(/((<.+?>)*)[^<>]?/g,"$1");
		ggewz.innerHTML = str1+str2;
	},100);
</script>
 </body>
</html>

天际的海浪 2017-11-02

打赏
举报

用innerText 的话，里面的html标签样式不都没有了，应该用正则表达式过滤字符吧

当作看不见 2017-11-02

打赏
举报

我可以很负责的告诉你,没有兼容性问题, 但这绝对不是唯一且最好的解决方案,只是一个比较简单和便于理解的解决方案.

qingwadaxia_1 2017-11-02

打赏
举报

引用 1 楼 qq_29594393 的回复:

不是很复杂,就是不要用html 插入,改为先设置样式,再插入文本text,


<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <style type="text/css">
 	#ggewz{
 		color: red;
 	}
 </style>
 <body>
  <div class="call"><i id="ggewz"></i></div>
<div id="cccv">电话垂询：<div class="aaxz"><span>1111-1111111</span></div></div>
<script>
var ggewz = document.getElementById("ggewz");
var cccv = document.getElementById("cccv");
var time = null;
var num = 0;
time =setInterval(function(){
ggewz.innerText = cccv.innerText.substring(0,num++);
},30);
</script>
 </body>
</html>

innerText确实使用这个不会在打印的时候打印html的动作，只是这个好像是有兼容问题吗这是唯一且最好的解决方法吗

当作看不见 2017-11-02

打赏
举报

不是很复杂,就是不要用html 插入,改为先设置样式,再插入文本text,


<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <style type="text/css">
 	#ggewz{
 		color: red;
 	}
 </style>
 <body>
  <div class="call"><i id="ggewz"></i></div>
<div id="cccv">电话垂询：<div class="aaxz"><span>1111-1111111</span></div></div>
<script>
var ggewz = document.getElementById("ggewz");
var cccv = document.getElementById("cccv");
var time = null;
var num = 0;
time =setInterval(function(){
ggewz.innerText = cccv.innerText.substring(0,num++);
},30);
</script>
 </body>
</html>

js文字一个个出现有html代码的话怎么解决呢

相关推荐