Highlight the text according to text in Angular Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern) Data science time! April 2019 and salary with experience The Ask Question Wizard is Live!Vim clear last search highlightingWord Macro 2010 for counting highlightshow to highlight text as it is narrated in iphoneAngular HTML bindingHighlight Text in textarea if not in the array using highlighttextarea pluginHighlight the search text - angular 2How to create a pipe to highlight the text in the sentence with given list of wordsGrading Quiz with highlighted colorsHighlighting words and string in a html span programaticallyWhile listing the json data in angular 7 getting an error “Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed”

What are some likely causes to domain member PC losing contact to domain controller?

How to infer difference of population proportion between two groups when proportion is small?

Do i imagine the linear (straight line) homotopy in a correct way?

The Nth Gryphon Number

How many time has Arya actually used Needle?

Meaning of 境 in その日を境に

Where and when has Thucydides been studied?

Why can't fire hurt Daenerys but it did to Jon Snow in season 1?

malloc in main() or malloc in another function: allocating memory for a struct and its members

Was the pager message from Nick Fury to Captain Marvel unnecessary?

Is a copyright notice with a non-existent name be invalid?

One-one communication

The test team as an enemy of development? And how can this be avoided?

Why did Bronn offer to be Tyrion Lannister's champion in trial by combat?

Inverse square law not accurate for non-point masses?

Plotting a Maclaurin series

Where did Ptolemy compare the Earth to the distance of fixed stars?

How to resize main filesystem

Determine whether an integer is a palindrome

Is this Kuo-toa homebrew race balanced?

How to ask rejected full-time candidates to apply to teach individual courses?

How can I list files in reverse time order by a command and pass them as arguments to another command?

Does a random sequence of vectors span a Hilbert space?

Google .dev domain strangely redirects to https



Highlight the text according to text in Angular



Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern)
Data science time! April 2019 and salary with experience
The Ask Question Wizard is Live!Vim clear last search highlightingWord Macro 2010 for counting highlightshow to highlight text as it is narrated in iphoneAngular HTML bindingHighlight Text in textarea if not in the array using highlighttextarea pluginHighlight the search text - angular 2How to create a pipe to highlight the text in the sentence with given list of wordsGrading Quiz with highlighted colorsHighlighting words and string in a html span programaticallyWhile listing the json data in angular 7 getting an error “Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed”



.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;








-3















customers.json file
json file



customer.service.ts



service.ts



userdetails.component.ts



userdeatils.component.ts 1
userdetails.component.ts 2



userdetails.component.html
html file



so please I just Want to compare the goodword and badwords array with the json file of sentence data and find the goodwords and badwords in the sentence and highlight the word according if it is goodword then it highlight with green background and badword with red background.










share|improve this question

















  • 2





    Please add code sample of what have you tried so far.

    – kvetis
    Mar 22 at 13:12






  • 2





    Please do not post the code as links, share whatever you have tried so far and reproduce the issue if possible (use stackblitz for angular).

    – Sachin Gupta
    Mar 22 at 13:15











  • I am just trying by this method: for (var i = 0; i < this.goodwords.length; i++) var re = RegExp( "\b" + this.goodwords[i].replace(/[-/\^$*+?.()

    – Tushar
    Mar 23 at 3:20












  • @Tushar is a new contributor. Suggest him how he can ask a question. Stack Overflow is not just for SMART people. We should welcome every newbie here. So help him by suggesting him instead of making him demotivate by making negative feedback.

    – Surjeet Bhadauriya
    Mar 23 at 5:41

















-3















customers.json file
json file



customer.service.ts



service.ts



userdetails.component.ts



userdeatils.component.ts 1
userdetails.component.ts 2



userdetails.component.html
html file



so please I just Want to compare the goodword and badwords array with the json file of sentence data and find the goodwords and badwords in the sentence and highlight the word according if it is goodword then it highlight with green background and badword with red background.










share|improve this question

















  • 2





    Please add code sample of what have you tried so far.

    – kvetis
    Mar 22 at 13:12






  • 2





    Please do not post the code as links, share whatever you have tried so far and reproduce the issue if possible (use stackblitz for angular).

    – Sachin Gupta
    Mar 22 at 13:15











  • I am just trying by this method: for (var i = 0; i < this.goodwords.length; i++) var re = RegExp( "\b" + this.goodwords[i].replace(/[-/\^$*+?.()

    – Tushar
    Mar 23 at 3:20












  • @Tushar is a new contributor. Suggest him how he can ask a question. Stack Overflow is not just for SMART people. We should welcome every newbie here. So help him by suggesting him instead of making him demotivate by making negative feedback.

    – Surjeet Bhadauriya
    Mar 23 at 5:41













-3












-3








-3








customers.json file
json file



customer.service.ts



service.ts



userdetails.component.ts



userdeatils.component.ts 1
userdetails.component.ts 2



userdetails.component.html
html file



so please I just Want to compare the goodword and badwords array with the json file of sentence data and find the goodwords and badwords in the sentence and highlight the word according if it is goodword then it highlight with green background and badword with red background.










share|improve this question














customers.json file
json file



customer.service.ts



service.ts



userdetails.component.ts



userdeatils.component.ts 1
userdetails.component.ts 2



userdetails.component.html
html file



so please I just Want to compare the goodword and badwords array with the json file of sentence data and find the goodwords and badwords in the sentence and highlight the word according if it is goodword then it highlight with green background and badword with red background.







angular typescript highlight angular7






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Mar 22 at 13:01









TusharTushar

31




31







  • 2





    Please add code sample of what have you tried so far.

    – kvetis
    Mar 22 at 13:12






  • 2





    Please do not post the code as links, share whatever you have tried so far and reproduce the issue if possible (use stackblitz for angular).

    – Sachin Gupta
    Mar 22 at 13:15











  • I am just trying by this method: for (var i = 0; i < this.goodwords.length; i++) var re = RegExp( "\b" + this.goodwords[i].replace(/[-/\^$*+?.()

    – Tushar
    Mar 23 at 3:20












  • @Tushar is a new contributor. Suggest him how he can ask a question. Stack Overflow is not just for SMART people. We should welcome every newbie here. So help him by suggesting him instead of making him demotivate by making negative feedback.

    – Surjeet Bhadauriya
    Mar 23 at 5:41












  • 2





    Please add code sample of what have you tried so far.

    – kvetis
    Mar 22 at 13:12






  • 2





    Please do not post the code as links, share whatever you have tried so far and reproduce the issue if possible (use stackblitz for angular).

    – Sachin Gupta
    Mar 22 at 13:15











  • I am just trying by this method: for (var i = 0; i < this.goodwords.length; i++) var re = RegExp( "\b" + this.goodwords[i].replace(/[-/\^$*+?.()

    – Tushar
    Mar 23 at 3:20












  • @Tushar is a new contributor. Suggest him how he can ask a question. Stack Overflow is not just for SMART people. We should welcome every newbie here. So help him by suggesting him instead of making him demotivate by making negative feedback.

    – Surjeet Bhadauriya
    Mar 23 at 5:41







2




2





Please add code sample of what have you tried so far.

– kvetis
Mar 22 at 13:12





Please add code sample of what have you tried so far.

– kvetis
Mar 22 at 13:12




2




2





Please do not post the code as links, share whatever you have tried so far and reproduce the issue if possible (use stackblitz for angular).

– Sachin Gupta
Mar 22 at 13:15





Please do not post the code as links, share whatever you have tried so far and reproduce the issue if possible (use stackblitz for angular).

– Sachin Gupta
Mar 22 at 13:15













I am just trying by this method: for (var i = 0; i < this.goodwords.length; i++) var re = RegExp( "\b" + this.goodwords[i].replace(/[-/\^$*+?.()

– Tushar
Mar 23 at 3:20






I am just trying by this method: for (var i = 0; i < this.goodwords.length; i++) var re = RegExp( "\b" + this.goodwords[i].replace(/[-/\^$*+?.()

– Tushar
Mar 23 at 3:20














@Tushar is a new contributor. Suggest him how he can ask a question. Stack Overflow is not just for SMART people. We should welcome every newbie here. So help him by suggesting him instead of making him demotivate by making negative feedback.

– Surjeet Bhadauriya
Mar 23 at 5:41





@Tushar is a new contributor. Suggest him how he can ask a question. Stack Overflow is not just for SMART people. We should welcome every newbie here. So help him by suggesting him instead of making him demotivate by making negative feedback.

– Surjeet Bhadauriya
Mar 23 at 5:41












1 Answer
1






active

oldest

votes


















0














Instead of so much negative feedback on this question, I am here to give you an answer.



Stackblitz Demo here




Component




Remember to make all the words in lowercase in the goodWords and the badWords array



 obj = 
customer: [

threshold: 80,
sentence: 'Agent : Thank you for calling ABC company. My name is Ashley. How may I help you today?'
,

threshold: 40,
sentence: 'Customer : I am calling because I recieved a wrong bill. I just paid my phone bill two days ago.'
,
]
;
goodWords = ['thank', 'you', 'help', 'sorry', 'please'];
badWords = ['wrong', 'our', 'last', 'my'];



HTML




<div *ngFor="let item of obj.customer">
<span *ngFor="let word of item.sentence.split(' ')">

<span *ngIf="goodWords.indexOf(word.trim().toLowerCase()) > -1; else redWord">
&nbsp;<span style="color: green">word</span>
</span>

<ng-template #redWord>
<span *ngIf="badWords.indexOf(word.trim().toLowerCase()) > -1; else other" style="color: red">
word
</span>
</ng-template>

<ng-template #other>
word
</ng-template>
</span>
<br><br>
</div>


So I have handled all the things in the HTML itself. Hopefully, this will work for you.






share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function ()
    StackExchange.using("externalEditor", function ()
    StackExchange.using("snippets", function ()
    StackExchange.snippets.init();
    );
    );
    , "code-snippets");

    StackExchange.ready(function()
    var channelOptions =
    tags: "".split(" "),
    id: "1"
    ;
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function()
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled)
    StackExchange.using("snippets", function()
    createEditor();
    );

    else
    createEditor();

    );

    function createEditor()
    StackExchange.prepareEditor(
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader:
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    ,
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    );



    );













    draft saved

    draft discarded


















    StackExchange.ready(
    function ()
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55300206%2fhighlight-the-text-according-to-text-in-angular%23new-answer', 'question_page');

    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    Instead of so much negative feedback on this question, I am here to give you an answer.



    Stackblitz Demo here




    Component




    Remember to make all the words in lowercase in the goodWords and the badWords array



     obj = 
    customer: [

    threshold: 80,
    sentence: 'Agent : Thank you for calling ABC company. My name is Ashley. How may I help you today?'
    ,

    threshold: 40,
    sentence: 'Customer : I am calling because I recieved a wrong bill. I just paid my phone bill two days ago.'
    ,
    ]
    ;
    goodWords = ['thank', 'you', 'help', 'sorry', 'please'];
    badWords = ['wrong', 'our', 'last', 'my'];



    HTML




    <div *ngFor="let item of obj.customer">
    <span *ngFor="let word of item.sentence.split(' ')">

    <span *ngIf="goodWords.indexOf(word.trim().toLowerCase()) > -1; else redWord">
    &nbsp;<span style="color: green">word</span>
    </span>

    <ng-template #redWord>
    <span *ngIf="badWords.indexOf(word.trim().toLowerCase()) > -1; else other" style="color: red">
    word
    </span>
    </ng-template>

    <ng-template #other>
    word
    </ng-template>
    </span>
    <br><br>
    </div>


    So I have handled all the things in the HTML itself. Hopefully, this will work for you.






    share|improve this answer



























      0














      Instead of so much negative feedback on this question, I am here to give you an answer.



      Stackblitz Demo here




      Component




      Remember to make all the words in lowercase in the goodWords and the badWords array



       obj = 
      customer: [

      threshold: 80,
      sentence: 'Agent : Thank you for calling ABC company. My name is Ashley. How may I help you today?'
      ,

      threshold: 40,
      sentence: 'Customer : I am calling because I recieved a wrong bill. I just paid my phone bill two days ago.'
      ,
      ]
      ;
      goodWords = ['thank', 'you', 'help', 'sorry', 'please'];
      badWords = ['wrong', 'our', 'last', 'my'];



      HTML




      <div *ngFor="let item of obj.customer">
      <span *ngFor="let word of item.sentence.split(' ')">

      <span *ngIf="goodWords.indexOf(word.trim().toLowerCase()) > -1; else redWord">
      &nbsp;<span style="color: green">word</span>
      </span>

      <ng-template #redWord>
      <span *ngIf="badWords.indexOf(word.trim().toLowerCase()) > -1; else other" style="color: red">
      word
      </span>
      </ng-template>

      <ng-template #other>
      word
      </ng-template>
      </span>
      <br><br>
      </div>


      So I have handled all the things in the HTML itself. Hopefully, this will work for you.






      share|improve this answer

























        0












        0








        0







        Instead of so much negative feedback on this question, I am here to give you an answer.



        Stackblitz Demo here




        Component




        Remember to make all the words in lowercase in the goodWords and the badWords array



         obj = 
        customer: [

        threshold: 80,
        sentence: 'Agent : Thank you for calling ABC company. My name is Ashley. How may I help you today?'
        ,

        threshold: 40,
        sentence: 'Customer : I am calling because I recieved a wrong bill. I just paid my phone bill two days ago.'
        ,
        ]
        ;
        goodWords = ['thank', 'you', 'help', 'sorry', 'please'];
        badWords = ['wrong', 'our', 'last', 'my'];



        HTML




        <div *ngFor="let item of obj.customer">
        <span *ngFor="let word of item.sentence.split(' ')">

        <span *ngIf="goodWords.indexOf(word.trim().toLowerCase()) > -1; else redWord">
        &nbsp;<span style="color: green">word</span>
        </span>

        <ng-template #redWord>
        <span *ngIf="badWords.indexOf(word.trim().toLowerCase()) > -1; else other" style="color: red">
        word
        </span>
        </ng-template>

        <ng-template #other>
        word
        </ng-template>
        </span>
        <br><br>
        </div>


        So I have handled all the things in the HTML itself. Hopefully, this will work for you.






        share|improve this answer













        Instead of so much negative feedback on this question, I am here to give you an answer.



        Stackblitz Demo here




        Component




        Remember to make all the words in lowercase in the goodWords and the badWords array



         obj = 
        customer: [

        threshold: 80,
        sentence: 'Agent : Thank you for calling ABC company. My name is Ashley. How may I help you today?'
        ,

        threshold: 40,
        sentence: 'Customer : I am calling because I recieved a wrong bill. I just paid my phone bill two days ago.'
        ,
        ]
        ;
        goodWords = ['thank', 'you', 'help', 'sorry', 'please'];
        badWords = ['wrong', 'our', 'last', 'my'];



        HTML




        <div *ngFor="let item of obj.customer">
        <span *ngFor="let word of item.sentence.split(' ')">

        <span *ngIf="goodWords.indexOf(word.trim().toLowerCase()) > -1; else redWord">
        &nbsp;<span style="color: green">word</span>
        </span>

        <ng-template #redWord>
        <span *ngIf="badWords.indexOf(word.trim().toLowerCase()) > -1; else other" style="color: red">
        word
        </span>
        </ng-template>

        <ng-template #other>
        word
        </ng-template>
        </span>
        <br><br>
        </div>


        So I have handled all the things in the HTML itself. Hopefully, this will work for you.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Mar 23 at 5:44









        Surjeet BhadauriyaSurjeet Bhadauriya

        2,09011528




        2,09011528





























            draft saved

            draft discarded
















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid


            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.

            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55300206%2fhighlight-the-text-according-to-text-in-angular%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Kamusi Yaliyomo Aina za kamusi | Muundo wa kamusi | Faida za kamusi | Dhima ya picha katika kamusi | Marejeo | Tazama pia | Viungo vya nje | UrambazajiKuhusu kamusiGo-SwahiliWiki-KamusiKamusi ya Kiswahili na Kiingerezakuihariri na kuongeza habari

            Swift 4 - func physicsWorld not invoked on collision? The Next CEO of Stack OverflowHow to call Objective-C code from Swift#ifdef replacement in the Swift language@selector() in Swift?#pragma mark in Swift?Swift for loop: for index, element in array?dispatch_after - GCD in Swift?Swift Beta performance: sorting arraysSplit a String into an array in Swift?The use of Swift 3 @objc inference in Swift 4 mode is deprecated?How to optimize UITableViewCell, because my UITableView lags

            Access current req object everywhere in Node.js ExpressWhy are global variables considered bad practice? (node.js)Using req & res across functionsHow do I get the path to the current script with Node.js?What is Node.js' Connect, Express and “middleware”?Node.js w/ express error handling in callbackHow to access the GET parameters after “?” in Express?Modify Node.js req object parametersAccess “app” variable inside of ExpressJS/ConnectJS middleware?Node.js Express app - request objectAngular Http Module considered middleware?Session variables in ExpressJSAdd properties to the req object in expressjs with Typescript