您的位置：首页 > 产品设计 > UI/UE

关于对UEditor富文本框所获取的数据做“筛选”处理

2017-05-17 22:24 337 查看
之前写东西的时候碰到一个问题，大致是从后台的富文本框获取新闻的内容展示出来，具体分为简介页和详情页，但是简介页不能出现图片。那我们获取的数据是一样的，如何在简介页将图片筛掉呢？我开始想了一种方法，就是在简介页获取数据的时候，直接把
<img>
标签给删除掉，然而仔细想了下后觉得并不好，因为这样意味着要删除标签所有的内容，然而我们并不知道这个标签具体有多长，无法用分割字符串来解决。后来想到了
display：none
我们只要在用js的字符串方法识别到
'<img'
这样的字符串，然后在其后面添加
display：none
这样就可以把所有的img标签都筛掉了。我们来举个例子：

举例子之前，我们来看看2个字符串方法

1 :str.indexOf(searchStr,searchStart)

第一个参数是所要寻找的字符串的值，第二个是开始寻找的位置 ，如果没有寻找到对应的字符串，则返回-1

2 str.substring(start,stop）

前后两个参数的意义是开始和停止寻找的位置

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="box">
</div>
<script src='https://cdn.bootcss.com/jquery/3.2.1/jquery.js'></script>
<script>
//str为整段字符串，subStr为要寻找的字符串
function searchSubStr(str,subStr){
//第二个参数为0，则从0位置开始寻找，pos的值为找到第一个str的位置
var pos = str.indexOf(subStr);
//因为如果找不到，str.indexOf()这个方法就会返回-1，所以我们有while循环来限定
while(pos>-1){
//把每个str的位置存到数组里
positions.push(pos);
pos = str.indexOf(subStr,pos+1);
}
console.log(pos)
// 返回存有str位置的数组
return positions
}
function insert_flg(str,flg,sn){
var newstr="";
// 把一整段字符串分为两断
var tmp=str.substring(0, sn);
var tmp1=str.substring(sn);
//在其中间插入 “style="display:none”
newstr+=tmp+flg+tmp1;
return newstr;
}
var str = "<div>今天早上去买菜"+
"<img src='123.png'>"+
"</div>";
//测试代码
var positions = new Array();
var posi=searchSubStr(str,"<img")
var flg=' style="display:none" ';
console.log(posi)
for(var i=0;i<posi.length;i++){
console.log(posi.length)
//因为每次插入flg，整段字符串都会变长，而且“<img”的位置也会变化，sn的值也要随之变化。
str=insert_flg(str,flg,posi[i]+5+(i*20))
}
//测试代码
$(".box").append(str)

console.log(str)
</script>
</body>
</html>



这是注释掉测试代码的结果


这是有测试代码的结果
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  富文本框-字符串
相关文章推荐
新的分享
章节导航