SpringDataSolr完成高亮显示关键字的功能

客官°小女子只卖身不卖艺 2022-01-21 06:11 285阅读 0赞

[上一节][Link 1]

### 五、完成高亮显示关键字的功能 ###

将用户输入的关键字在标题中用红色的字体显示出来，就是搜索中常用的高亮显示。

public Map search(Map searchMap) { 
    	Map map = new HashMap();
    	// 高亮查询
    	HighlightQuery query = new SimpleHighlightQuery();
    	// 构建高亮选项对象
    	HighlightOptions highlightOptions = new HighlightOptions();
    	// 在哪一列上加高亮域
    	highlightOptions.addField("item_title");
    	// 加前缀
    	highlightOptions.setSimplePrefix("<em style='colr:red;'>");
    	// 加后缀
    	highlightOptions.setSimplePostfix("</em>");
    	
    	// 为查询对象设置高亮选项
    	query.setHighlightOptions(highlightOptions);
    	
    	// 关键字查询
    	Criteria criteria = new Criteria("item_keywords");
    	criteria.is(searchMap.get("keywords"));
    	query.addCriteria(criteria);
    	
    	// 返回高亮页
    	HighlightPage<TbItem> page = solrTemplate.queryForHighlightPage(query , TbItem.class);
    	
    	map.put("rows", page.getContent());
    	return map;
    }

这个时候再进行测试：  
![在这里插入图片描述][20190608175817161.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI1NDkwNw_size_16_color_FFFFFF_t_70]  
会发现标题并没有高亮显示，那就证明刚才`page.getContent()`里面并没有高亮的内容，它只是一个它的原生内容，就是不经过高亮处理的内容。那么如何得到这个高亮的结果呢？其实它是另外有一个地方是做这个高亮的。其实高亮的结果并不是在`page.getContent()`里面去出现的。如果我们需要进行高亮的话，还要通过`page`对象去找。这个高亮结果其实是在`page.getHighlighted()`里头。

// 高亮入口集合（每条记录的高亮入口）
    List<HighlightEntry<TbItem>> highlightedList = page.getHighlighted();
    for (HighlightEntry<TbItem> highlightEntry : highlightedList) { 
    	// 获取高亮列表（高亮列表的个数）
    	List<Highlight> highlightList = highlightEntry.getHighlights();
    	/* for (Highlight highlight : highlightList) { List<String> snipplets = highlight.getSnipplets(); System.out.println(snipplets); } */
    	if(highlightList.size() > 0 && highlightList.get(0).
    									getSnipplets().size() > 0) { 
    		// 这个item其实就是page.getContent()的一个引用
    		TbItem item = highlightEntry.getEntity();
    		// 只要把结果装里面，page.getContent()自然就有这个东西了。
    		item.setTitle(highlightList.get(0).getSnipplets().get(0));
    	}
    }

这时候再看一下查询结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI1NDkwNw_size_16_color_FFFFFF_t_70 1]  
显示出来了，但是格式不对。它没有去解释这个html，这个不是后端的问题，问题出在Angular上。如果我们用传统的JSP来做这个事儿，其实他也能出现红色字体。但是Angular为什么没有出现这个东西呢？这其实是Angular默认的一个安全策略。主要是为了有些人做HTML攻击。防止有些人在页面中嵌入一些代码来改这些内容。那怎样才能显示出来样式呢？这时候需要Angular的一个服务叫`$sce服务`：`AngularJS信任策略`。除了有HTML外，还可能有JS攻击。我们来调用`$sce`服务的`trustAsHtml`方法来把文本转换为能够解析的HTML。  
其实这属于Angular的过滤器。  
代码如下：

app.filter('trustHtml', ['$sce', function ($sce) { 
        return function (text) { // 传入参数是需要被过滤的内容
          return $sce.trustAsHtml(text);// 返回的是过滤后的内容（信任HTML的转换）
        }
      }]
    );

接下来需要在页面上去使用这个过滤器  
这时候就不能以这样一种方式输出了：

<div class="attr">
    	<em>{
       {item.title}}</em>
    </div>

而是需要使用Angular的另外一个指令`ng-bing-html`来输出HTML

显示`item.title`并且调用过滤器`trustHtml`。  
**知识点：**  
1.`$sce`服务：`$sce.trustAsHtml`来对HTML进行转换。  
2.`filter`过滤器：相当于一个全局方法。  
3.调用过滤器：使用竖线`|`去调用，前面部分是需要被转换的内容。后面部分是调用的过滤器的名称。  
4.`trustAsHtml`：信任HTML方法

[Link 1]: https://blog.csdn.net/weixin_43254907/article/details/91049484
[20190608175817161.png]: /images/20220121/4b057f669da840eea35f55fdc539a2f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI1NDkwNw_size_16_color_FFFFFF_t_70]: /images/20220121/3d098aef100e46f8b70c89574a0a5e01.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI1NDkwNw_size_16_color_FFFFFF_t_70 1]: /images/20220121/a6aaf55b38a24f9c813aa99a0b4783ce.png