Ng2-select: HighlightPipe doesn't supports sanitized values

Created on 22 Sep 2016 · 7Comments · Source: valor-software/ng2-select

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.

Source

GreenToast

👍1

Most helpful comment

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;
};

moodyroto on 23 Sep 2016

❤3

All 7 comments

Same as #437 #438

alpeshv on 23 Sep 2016

As this major bug is present in the only version supporting Angular2, fixing it soon would be really appreciated.

Scipionh on 23 Sep 2016

GuillaumeDK57 on 23 Sep 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;
};

moodyroto on 23 Sep 2016

❤3

+1 @Scipionh

monica11 on 29 Sep 2016

@moodyroto Nice workaround. It worked for me.
@valorkin Hope this issue might be addressed in the package also sometime later.

gauzpan on 30 Sep 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.