正则表达式之图文混排

目的 : 实现一句话中既有文字又有图片的功能.

图文混排又称富文本.

直接代码演示:

  NSAttributedString+Emoji.h 中 : 

1 #import <Foundation/Foundation.h>
2
3 @interface NSAttributedString (Emoji)
4
5 + (NSAttributedString *)emojiStringWithString:(NSMutableAttributedString *)emojiString;
6
7 @end

  NSAttributedString+Emoji.m 中:

 1 #import "NSAttributedString+Emoji.h"
 2 #import <UIKit/UIKit.h>
 3
 4 @interface EmojiAttachment : NSTextAttachment
 5
 6 @end
 7
 8 @implementation EmojiAttachment
 9
10 - (CGRect)attachmentBoundsForTextContainer:(NSTextContainer *)textContainer proposedLineFragment:(CGRect)lineFrag glyphPosition:(CGPoint)position characterIndex:(NSUInteger)charIndex
11 {
12     return CGRectMake( 0 , -3, lineFrag.size.height, lineFrag.size.height);
13 }
14
15 @end
16
17
18 @implementation NSAttributedString (Emoji)
19
20 + (NSAttributedString *)emojiStringWithString:(NSMutableAttributedString *)emojiString
21 {
22     NSRegularExpression *regularEx = [NSRegularExpression regularExpressionWithPattern:@"m[0-9]{3}" options:NSRegularExpressionCaseInsensitive error:nil];
23
24     NSString *string = emojiString.string;
25
26     NSTextCheckingResult *result = [regularEx firstMatchInString:string options:NSMatchingReportCompletion range:NSMakeRange(0, string.length)];
27     if (result != nil) {
28         NSString *imageName = [NSString stringWithFormat:@"%@.png", [string substringWithRange:result.range]];
29         EmojiAttachment *attachment = [[EmojiAttachment alloc] initWithData:nil ofType:nil];
30         attachment.image = [UIImage imageNamed:imageName];
31         NSAttributedString *attrString = [NSAttributedString attributedStringWithAttachment:attachment];
32
33         [emojiString replaceCharactersInRange:result.range withAttributedString:attrString];
34         // 递归
35         [self emojiStringWithString:emojiString];
36     } else {
37         return emojiString;
38     }
39     return emojiString;
40 }

    在控制器中:

1      NSString *string = @"菲尼模式的博客,m006m008 图文混排又称富文本m010 !!! 菲尼模式的博客,m006m008 图文混排又称富文本m010!!!菲尼模式的博客,m006m008 图文混排又称富文本m010!!!";
2     self.myLabel.attributedText = [NSAttributedString emojiStringWithString:[[NSMutableAttributedString alloc]initWithString:string]];
3     self.myLabel.font = [UIFont boldSystemFontOfSize:23];

   直接把.m 和.h文件放入工程中即可使用.  

实现效果 :

时间: 2024-12-12 05:56:17

正则表达式之图文混排的相关文章

(一一一)图文混排基础 -利用正则分割和拼接属性字符串

很多时候需要用到图文混排,例如聊天气泡中的表情,空间.微博中的表情,例如下图: 红心和文字在一起. 比较复杂的情况是表情夹杂在文字之间. 要实现这种功能,首先要介绍iOS中用于显示属性文字的类. 用于文字显示的类除了text属性之外,还有attributedText属性,这个属性是NSAttributedString类型,通过这个属性可以实现不同文字的不同字体.颜色甚至把图片作为文字显示的功能. 下面介绍这个字符串的使用. 以一条微博内容为应用场景,介绍如何从中找出表情.话题等内容,其中表情替换

EditText图文混排

下面就具体说一下我遇到的问题,首先是EditText里面的图文混排问题,这个问题的难点就是三点: 1.怎么插图片 2.怎么保存插入的图片和文字 3.怎么解析回图片和文字 解决: 一.怎么插入图片 在这里定义了两个Button按钮和一个EditText,插入图片的话,就是点击插入图片按钮然后从sd卡中选择一张图片出来.下面是实现代码: 首先是button的监听事件: btn_insertImage.setOnClickListener(new OnClickListener() { @Overri

iOS开发 - 第05篇 - 项目 - 12 - 图文混排

1.首页微博文字处理 对于之前微博项目中首页:微博文字中的用户名.话题.链接等文字需要高亮显示,表情字符串需要显示对应表情. 思路: 1>之前微博中的文字使用NSString,要达到不同文字的高亮显示,需要使用NSAttributedString 2>微博模型中增加一个属性,代表属性字符串 /** string     微博信息内容*/ @property(nonatomic, copy) NSString *text; /** string     微博信息内容 -- 带有属性的(特殊文字会

iOS 图文混排

1) 在iOS 7之前也有一种用于文字排版和渲染的技术——Core Text,而引入Text Kit的目的并非要取代Core Text. Core Text是面????层的文字排版和渲染技术,如果我们需要将文本内容??接渲染到图形上下文时,从性能角度考虑 ??,最佳??方案??是使用Core Text.??是从易??用性角度考虑??,使用Text Kit是最好的选择,因为??能直????接使用UIKit 提供的一些文本控件,例如:UITextView.UILabel和UITextField,对文

[UGUI]图文混排(一):标签制定和解析

参考链接: https://github.com/SylarLi/RichText/tree/master/Assets/Scripts 正则表达式: https://blog.csdn.net/lyh916/article/details/49201195 图文混排主要用于聊天,其实就是传输某种格式的字符串,然后解析这个字符串,生成表情文字等.图文混排的第一步,就是确定好格式,这里使用html的标签格式,对于代码中出现的start和end字段可以先忽略.标签格式如下: <material=un

经验之谈—正則表達式实现图文混排

在项目中,我们常常须要发表情,以及常常须要将表情字符转换成表情.由于表情是一个图片.所以我们发给server的时候,实际上是发一段特殊的文字给server,然后转换成表情.以免浪费用户过多的流量. 那接下来.我们就来介绍一下,怎样使用正則表達式实现图文混排呢? 为了以后的代码的管理方便,我们抽取出两个类: NSString+Regular.h中.我们暴露两个方法出来: /** * 返回正則表達式匹配的第一个结果 * * @param pattern 正則表達式 * * @return 匹配的第一

CoreText实现图文混排之点击事件-b

CoreText实现图文混排之点击事件 主要思路 我们知道,CoreText是基于UIView去绘制的,那么既然有UIView,就有 -(void)touchesBegan:(NSSet<UITouch *> )touches withEvent:(UIEvent )event方法,我们呢,就是基于这个方法去做点击事件的. 通过touchBegan方法拿到当前点击到的点,然后通过坐标判断这个点是否在某段文字上,如果在则触发对应事件. 上面呢就是主要思路.接下来呢,我们来详细讲解一下.还是老规矩

CSS基础学习十九:CSS布局之图文混排,图像签名,多图拼接和图片特效

学习了CSS布局的定位和浮动,我们可以简单地做出很多排版和内容拼接.今天就来做几个简单的实例展示现在 流行的DIV+CSS布局的方便好用之处.顺便也说一下CSS3新增的样式属性box-shadow和属性transform. 一图文混排 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

关于仿网易新闻中详细页图文混排功能的实现

最近在了解关于新闻内容的图文混排的效果,网上有人开源一个仿网易新闻的代码,本文就是简单记录学习其详细页面显示的效果实现: 下载地址:https://github.com/dsxNiubility/SXNews 效果图: 其原理:通过网络请求获得相关的信息,再通过手机端进行拼HTML,然后在WebView进行展示,此处还对文章中的图片增加点击效果,可以保存到相册中:文章的样式已经存在项目中,直接去调用: 1:首先了解两个相关的实体对象,一个是新闻的主体内容,另外一个就是图片的相关信息实体: 1:主