用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

2017-2-14 11:04:34 天下雪原创达人 造轮子 人生巅峰 楼主 119667
以后我看还是少一些非技术性话题,多一些技术性的话题,我会偶尔提一个我看到又觉得实用的问题;大家假如有自己的思路的话,欢迎回复在这里,能够直接实现的当然更好了~~

搜索关键词高亮,类似小程序联盟网站的高亮:
QQ截图20170214110316.png
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
[HTML] 纯文本查看 复制代码
<navigator>
    <text wx:for="{{motto}}" class="{{item == keyName ? 'gjz' : '' }}">{{item}}</text>
</navigator>

[CSS] 纯文本查看 复制代码
.gjz {
  color: #f00;
}

[JavaScript] 纯文本查看 复制代码
const getInf = (str, key)=> str.replace(new RegExp(`${key}`, 'g'), `%%${key}%%`).split('%%');

Page({
  data: {
    keyName: '前端',
    motto: getInf('加油,前端开发,前端加油。', '前端')
  }
})

我是这么干的

评分

参与人数 1原创 +1 浮云 +20 收起 理由
天下雪 + 1 + 20 很给力!

查看全部评分

2017-2-14 18:01:26 howard乐于助人 版主
沙发
没做过这个,目前想法是用正则匹配,把匹配到的关键词套个标签,给这个标签设个color样式,然后重新拼装字符串渲染到页面

评分

参与人数 1浮云 +10 收起 理由
天下雪 + 10 感谢参与

查看全部评分

我整理一下外部的讨论,将其总结一下,不一定都是可用的,仅供参考,如果你有其他想法,欢迎回复在这:

怎么把关键词弄成高亮?我接收到的数据如果里面带text标签就自动转换了
144158g7yihahaogay0fyb.png
蜗牛呆呆 :
告诉你一个思路把,可以在返回数据的数据循环一下把标题根据上面的条件判断,分割成两个字符,然后做出一个新的集合,

[AppleScript] 纯文本查看 复制代码
      for (var i = 0; i < this.data.liuliangItems.length; i++) {
        if (e.target.dataset.orderid == this.data.liuliangItems[i].id) {
          txtArray1[i] = {
            id: this.data.liuliangItems[i].id, changeColor: true,
            price: this.data.liuliangItems[i].price, name: this.data.liuliangItems[i].name,
            one2one: this.data.liuliangItems[i].one2one
          }
}//这是根据id判断,然后添加了一个样式控制而已,思路差不多的

然后标题的地方进行样式的控制例如:<view><view class="title1">带高亮的css<view><view class="不带高亮的css"><view><view>然后css控制一下显示在同一行就可以了

回复:我没法把关键字单独加标签。不是样式控制的问题,我是没法把关键字单独摘出来加标签再放回去

蜗牛呆呆 :你看清楚一点那段代码,可以把你返回的集合进行遍历,拿到你的标题进行判断,判断完拿出你的关键字封装成新的集合
[AppleScript] 纯文本查看 复制代码
      for (var i = 0; i < this.data.liuliangItems.length; i++) {
        if (e.target.dataset.title == this.data.liuliangItems[i].title) {
//进行标题关键字的截取

//截取完,封装成一个新的集合
          txtArray1[i] = {
            title1: 截取的关键字, 
            title2: 剩余的标题
//然后再页面进行循环处理
          }


hfffx  :
有点麻烦,可以参考一些js实现搜索关键词高亮的例子http://blog.csdn.net/XuJinNet/article/details/5960678


GarveySun:
我还没开始玩小程序,提供个在别的也是不能写标签的框架里的思路:
在需要输入的地方埋三个点:<span></span><span class='high_light'></span><span></span>
如果有关键字就把关键字插进中间的,然后非关键字插进前后两个标签
@duan602728596 给看看有没有其他思路

相关链接:http://www.wxapp-union.com/portal.php?mod=view&aid=957
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
@空白后的寂静 昨天一个问题的回答:

问题:富文本解析的时候,图片是怎么显示的,我看图片解析成image标签,还是显示image标签啊


答:如果是Image 只是做一个type的区分,我截图清晰一点:
QQ图片20170217104542.png

问:他问是不是图片是不是还是需要提取出来,因为他直接替换的image标签根本就不渲染


答:不能直接替换,是渲染数据 小程序本身是通过数据来渲染的,替换 他还是按数据直接显示,不会变成标签
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
一个参考案例:本案例有票贩子实现github地址:https://github.com/newpepsi/weapputils
weapputils-master.zip (6.89 KB, 下载次数: 23)
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
duan602728596 发表于 2017-2-20 22:50
[mw_shl_code=css,true].gjz {
  color: #f00;
}[/m ...

可以,很简洁
新的思路:

暂时只能把标题进行一个切割,然后判断是否为关键字,然后把关键字放到一个带高亮样式的标签中,其余的放在另一个没有高亮的标签设置在同一行就可以了

for (var i = 0; i < this.data.liuliangItems.length; i++) {
        if (e.target.dataset.title == this.data.liuliangItems.title) {
//进行标题关键字的截取
//截取完,封装成一个新的集合
          txtArray1 = {
            title1: 截取的关键字,
            title2: 剩余的标题
//然后再页面进行循环处理
          }

有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。

我终于回来了

评分

参与人数 1浮云 +10 收起 理由
天下雪 + 10 赞一个!

查看全部评分


以后很多问题还要麻烦你有空帮忙看看
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
duan602728596 发表于 2017-2-20 22:50
[mw_shl_code=css,true].gjz {
  color: #f00;
}[/m ...

那motto和KeyName里怎么写动态数据
棒!
发新帖
您需要登录后才可以回帖 登录 | 立即注册