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;
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
add a comment |
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
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
add a comment |
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
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
angular typescript highlight angular7
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
add a comment |
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
add a comment |
1 Answer
1
active
oldest
votes
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">
<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.
add a comment |
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
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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">
<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.
add a comment |
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">
<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.
add a comment |
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">
<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.
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">
<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.
answered Mar 23 at 5:44
Surjeet BhadauriyaSurjeet Bhadauriya
2,09011528
2,09011528
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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