question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

HighlightPipe doesn't supports sanitized values

See original GitHub issue

Hi I migrated today to v.1.1.0 and adapted all params. I got problems with the text-selection. When I typed in one letter in the ng-select-component I got this error

TypeError: value.match is not a function at HighlightPipe.transform (select-pipes.js:15)

It seems that the function receives a sanitized value and not a pure value. So by adding one line to check the value if it is sanitized or not solves the problem.

HighlightPipe.prototype.transform = function (_value, args) {

       //this line fixes the problem
        var value =  _value.changingThisBreaksApplicationSecurity ? value.changingThisBreaksApplicationSecurity:_value;

        if (args.length < 1) {
            return value;
        }
        var query = args[0];
        if (query) {
            var tagRE = new RegExp('<[^<>]*>', 'ig');
            // get ist of tags
            var tagList = value.match(tagRE);

I hope you can fix it soon. It blocks our migration to 1.1.0.

Issue Analytics

  • State:open
  • Created 7 years ago
  • Reactions:1
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
moodyrotocommented, Sep 23, 2016

To follow up with @GreenToast’s recommendation, if anyone is looking for a hotfix, you can drop this into your main.ts file:

import {escapeRegexp} from 'ng2-select/components/select/common';
import {HighlightPipe} from 'ng2-select/components/select/select-pipes';

HighlightPipe.prototype.transform = (value: any, args: any[]) => {
    if (args.length < 1) {
        return value;
    }

    let query = args[0];

    if ( query ) {
        value = value.changingThisBreaksApplicationSecurity || value;

        let tagRE    = new RegExp('<[^<>]*>', 'ig');

        // get ist of tags
        let tagList  = value.match( tagRE );

        // Replace tags with token
        let tmpValue = value.replace( tagRE, '$!$');

        // Replace search words
        value = tmpValue.replace(
            new RegExp(escapeRegexp(query), 'gi'),
            '<strong>$&</strong>'
        );

        // Reinsert HTML
        for (let i = 0; value.indexOf('$!$') > -1; i++) {
            value = value.replace('$!$', tagList[i]);
        }
    }

    return value;
};
0reactions
vixriihicommented, Sep 30, 2016

Are you getting HighlightPipe.prototype.transform = (value: any, args: any[]) => { args parameter as an array? For me it was a string and so it ended up highlighting only the first character. I created a PR (#454) that fixed this issue in here.

Read more comments on GitHub >

github_iconTop Results From Across the Web

TreeView - The highlighted item is not clickable when the pipe ...
I found that the issue occurs because you are using sanitizer inside the template. Because of the pipe the value returned by the...
Read more >
Highlight Pipe does not highlight all instances of a value
I have created the following stackblitz example that shows how to work with highlight Pipes. Pipe : @Pipe({ name: 'highlight' }) export ...
Read more >
DomSanitizer - Angular
DomSanitizer helps preventing Cross Site Scripting Security bugs (XSS) by sanitizing values to be safe to use in the different DOM contexts.
Read more >
jfcere/ngx-markdown - GitHub
Angular markdown component/directive/pipe/service to parse static, ... Syntax highlight is optional, skip this step if you are not planning to use it.
Read more >
Using SQL String Functions to Clean Data - Mode Analytics
LEFT , RIGHT , and TRIM are all used to select only certain elements of strings, but using them to select elements of...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found