How to highlight text like in the image?

Question

How to highlight the text "cell phone" in the image?

Updated

I want to search text on a page and if found, the text should be highlighted in the way I have shown in the attached image.

Answer 1

Output

This Regular Expressions tutorial has detail on how to search the desired text using regular expression on UITextview and how to highlight it.

Essential Code that is to be used:

- (void)viewDidLoad
{
  [super viewDidLoad];
  [self searchData];
}

1) Following code searches for the required pattern from the data i.e TextView:

 - (void) searchData
{


    NSError *error = NULL;
    NSString *pattern = @"Hello";  // pattern to search thee data either regular expression or word.
    NSString *string = self.textView.text;
    NSRange range = NSMakeRange(0, string.length);
    NSRegularExpression *regex = [NSRegularExpression regularExpressionWithPattern:pattern options:NSRegularExpressionCaseInsensitive error:&error];
    NSArray *matches = [regex matchesInString:string options:NSMatchingProgress ran     ge:range];
   [self highlightMatches:matches];
}

2) Here we highlight the matches obtained from the result of regular expression matching by making use of CALayer and label:

 - (void)highlightMatches:(NSArray *)matches
 {


      __block NSMutableAttributedString *mutableAttributedString = self.textView.attributedText.mutableCopy;
     [matches enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop)
    {

     if ([obj isKindOfClass:[NSTextCheckingResult class]])
     {
         NSTextCheckingResult *match = (NSTextCheckingResult *)obj;
         CGRect rect = [self frameOfTextRange:match.range inTextView:self.textView];

         /** Shadow */

         CALayer *shadowLayer = [CALayer new];
         shadowLayer.frame = CGRectMake(rect.origin.x, rect.origin.y-4, rect.size.width, rect.size.height);
         shadowLayer.cornerRadius = 5;

         shadowLayer.backgroundColor = [UIColor yellowColor].CGColor;
         shadowLayer.shadowColor = [UIColor blackColor].CGColor;
         shadowLayer.shadowOpacity = 0.6;
         shadowLayer.shadowOffset = CGSizeMake(1,1);
         shadowLayer.shadowRadius = 3;

         /** Label */
         UILabel *lbl = [[UILabel alloc] initWithFrame:CGRectMake(rect.origin.x, rect.origin.y-4, rect.size.width, rect.size.height)];
         lbl.font = [UIFont fontWithName:@"Helvetica" size:12];
         lbl.textColor = [UIColor blackColor];
         [lbl setText:[[mutableAttributedString attributedSubstringFromRange:match.range] string]];
         lbl.backgroundColor = [UIColor clearColor];
         lbl.textAlignment = NSTextAlignmentCenter;
         lbl.layer.cornerRadius = 10;

         /** Add Label and layer*/

         [self.view.layer addSublayer:shadowLayer];
         [self.view addSubview:lbl];  
      }
  }];

  }

Function used to obtain the frame of the matched text in the textView:

- (CGRect)frameOfTextRange:(NSRange)range inTextView:(UITextView *)textView
 {
    UITextPosition *beginning = textView.beginningOfDocument; //Error=: request for member 'beginningOfDocument' in something not a structure or union

    UITextPosition *start = [textView positionFromPosition:beginning offset:range.location];
    UITextPosition *end = [textView positionFromPosition:start offset:range.length];
    UITextRange *textRange = [textView textRangeFromPosition:start toPosition:end];
    CGRect rect = [textView firstRectForRange:textRange];  //Error: Invalid Intializer

    return [textView convertRect:rect fromView:textView.textInputView]; // Error: request for member 'textInputView' in something not a structure or union

 }

Answer 2

Use NSMutableAttributedString this might work for you.

NSString *myString = @"Hello";
NSMutableAttributedString *aString = [[NSMutableAttributedString alloc] initWithString:myString];
NSRange theRange = NSMakeRange(0,[aString length]);

//Here we are setting foreground and background color to text for highlighting it.

[aString addAttribute:NSFontAttributeName value:[UIFont fontWithName:@"MyriadPro-Bold" size:17.5f] range:theRange];
[aString addAttribute:NSForegroundColorAttributeName value:[UIColor purpleColor] range:theRange];
[aString addAttribute:NSBackgroundColorAttributeName value:[UIColor yellowColor] range:theRange];

//You can change the range depending upon what portion of text you want to highlight.