Check if a div content contain a word from an array and replace it

I want to check if a div's contents contains a word from an array and add some tags like  to that word.

Here is my code:

var fruits = ["banana", "peach", "grappe", "lemon", "apple"];

          $( ".mystr" ).each(function() {

            mystr =   $( this ).html();

           if (fruits.some(function(v) { return mystr.indexOf(v) >= 0; })) {

// get the fruit and replace it with <b>thefruit</b>

//and print it in a div   

//"<div class='mynewstr'></div>"

           }      





            });

<div class='container'>



    <div class='mystr'>I love apple </div>

    <div class='mystr'>I don't  like banana</div>

    <div class='mystr'>I don't  like peach</div>

    <div class='mystr'>I  like both grappe and lemon</div>





    





    </div>

for exemple for

<div class='mystr'>I love apple </div>

must become

<div class='mynewstr'>I love <b>apple</b></div>

Any Idea ?

edited Nov 23 at 3:54

A J

5341319

asked Nov 23 at 2:42

mehdi

247

add a comment |

I want to check if a div's contents contains a word from an array and add some tags like  to that word.

Here is my code:

var fruits = ["banana", "peach", "grappe", "lemon", "apple"];

          $( ".mystr" ).each(function() {

            mystr =   $( this ).html();

           if (fruits.some(function(v) { return mystr.indexOf(v) >= 0; })) {

// get the fruit and replace it with <b>thefruit</b>

//and print it in a div   

//"<div class='mynewstr'></div>"

           }      





            });

<div class='container'>



    <div class='mystr'>I love apple </div>

    <div class='mystr'>I don't  like banana</div>

    <div class='mystr'>I don't  like peach</div>

    <div class='mystr'>I  like both grappe and lemon</div>





    





    </div>

for exemple for

<div class='mystr'>I love apple </div>

must become

<div class='mynewstr'>I love <b>apple</b></div>

Any Idea ?

edited Nov 23 at 3:54

A J

5341319

asked Nov 23 at 2:42

mehdi

247

add a comment |

I want to check if a div's contents contains a word from an array and add some tags like  to that word.

Here is my code:

var fruits = ["banana", "peach", "grappe", "lemon", "apple"];

          $( ".mystr" ).each(function() {

            mystr =   $( this ).html();

           if (fruits.some(function(v) { return mystr.indexOf(v) >= 0; })) {

// get the fruit and replace it with <b>thefruit</b>

//and print it in a div   

//"<div class='mynewstr'></div>"

           }      





            });

<div class='container'>



    <div class='mystr'>I love apple </div>

    <div class='mystr'>I don't  like banana</div>

    <div class='mystr'>I don't  like peach</div>

    <div class='mystr'>I  like both grappe and lemon</div>





    





    </div>

for exemple for

<div class='mystr'>I love apple </div>

must become

<div class='mynewstr'>I love <b>apple</b></div>

Any Idea ?

edited Nov 23 at 3:54

A J

5341319

asked Nov 23 at 2:42

mehdi

247

I want to check if a div's contents contains a word from an array and add some tags like  to that word.

Here is my code:

var fruits = ["banana", "peach", "grappe", "lemon", "apple"];

          $( ".mystr" ).each(function() {

            mystr =   $( this ).html();

           if (fruits.some(function(v) { return mystr.indexOf(v) >= 0; })) {

// get the fruit and replace it with <b>thefruit</b>

//and print it in a div   

//"<div class='mynewstr'></div>"

           }      





            });

<div class='container'>



    <div class='mystr'>I love apple </div>

    <div class='mystr'>I don't  like banana</div>

    <div class='mystr'>I don't  like peach</div>

    <div class='mystr'>I  like both grappe and lemon</div>





    





    </div>

for exemple for

<div class='mystr'>I love apple </div>

must become

<div class='mynewstr'>I love <b>apple</b></div>

Any Idea ?

var fruits = ["banana", "peach", "grappe", "lemon", "apple"];

          $( ".mystr" ).each(function() {

            mystr =   $( this ).html();

           if (fruits.some(function(v) { return mystr.indexOf(v) >= 0; })) {

// get the fruit and replace it with <b>thefruit</b>

//and print it in a div   

//"<div class='mynewstr'></div>"

           }      





            });

<div class='container'>



    <div class='mystr'>I love apple </div>

    <div class='mystr'>I don't  like banana</div>

    <div class='mystr'>I don't  like peach</div>

    <div class='mystr'>I  like both grappe and lemon</div>





    





    </div>

var fruits = ["banana", "peach", "grappe", "lemon", "apple"];

          $( ".mystr" ).each(function() {

            mystr =   $( this ).html();

           if (fruits.some(function(v) { return mystr.indexOf(v) >= 0; })) {

// get the fruit and replace it with <b>thefruit</b>

//and print it in a div   

//"<div class='mynewstr'></div>"

           }      





            });

<div class='container'>



    <div class='mystr'>I love apple </div>

    <div class='mystr'>I don't  like banana</div>

    <div class='mystr'>I don't  like peach</div>

    <div class='mystr'>I  like both grappe and lemon</div>





    





    </div>

javascript jquery arrays contains

edited Nov 23 at 3:54

A J

5341319

asked Nov 23 at 2:42

mehdi

247

edited Nov 23 at 3:54

A J

5341319

asked Nov 23 at 2:42

mehdi

247

edited Nov 23 at 3:54

A J

5341319

edited Nov 23 at 3:54

A J

5341319

edited Nov 23 at 3:54

A J

5341319

asked Nov 23 at 2:42

mehdi

247

asked Nov 23 at 2:42

mehdi

247

asked Nov 23 at 2:42

mehdi

247

add a comment |

2 Answers
2

active

oldest

votes

This might not be the most performant solution since it is iterating all fruits for each string, but if your fruits and .mystr set is not super big it should not be a problem:

var fruits = ["banana", "peach", "grappe", "lemon", "apple"];

$( ".mystr" ).each(function() {

  mystr = $( this ).html();

  fruits.forEach(f => {

    mystr = mystr.replace(f,`<b>${f}</b>`, 'g')

  }) 

  $( this ).html(mystr)  

});

Here's a codepen with it working
https://codepen.io/ederdiaz/pen/QJmmvg

answered Nov 23 at 3:01

EderChrono

1847

yes EderChrono, unfortunately my fruit table is quite big.
– mehdi
Nov 23 at 11:14

add a comment |

One option would be to join the fruits into a global regular expression (which will match any fruit substring), and then .replace the html() of every .mystr div with s surrounding the fruit words:

const fruits = ["banana", "peach", "grappe", "lemon", "apple"];

const pattern = new RegExp(fruits.join('|'), 'g');

$(".mystr").each(function() {

  $(this).html(

    $(this).html().replace(pattern, '<b>$&</b>')

  );

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='container'>



  <div class='mystr'>I love apple </div>

  <div class='mystr'>I don't like banana</div>

  <div class='mystr'>I don't like peach</div>

  <div class='mystr'>I like both grappe and lemon</div>

</div>

(note that $& in a replacement string gets replaced with the entire matched substring for that match)

answered Nov 23 at 2:45

CertainPerformance

74.6k143659

Thank you for your reply, your solution is working as expected but is it ok if you know that in reality my fruit table may contain more than 4000 entry ?
– mehdi
Nov 23 at 11:11

I think it'll still work, though if you're working with that much data, it might take a bit longer than expected. Also, for something like this, you should consider fixing it server-side rather than client-side, I think, if it takes up any significant CPU time
– CertainPerformance
Nov 23 at 19:30

Did it work for you? When an answer solves the problem you're having, consider marking it as Accepted to indicate that the issue is resolved :)
– CertainPerformance
Nov 24 at 10:27

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

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53440060%2fcheck-if-a-div-content-contain-a-word-from-an-array-and-replace-it%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

This might not be the most performant solution since it is iterating all fruits for each string, but if your fruits and .mystr set is not super big it should not be a problem:

var fruits = ["banana", "peach", "grappe", "lemon", "apple"];

$( ".mystr" ).each(function() {

  mystr = $( this ).html();

  fruits.forEach(f => {

    mystr = mystr.replace(f,`<b>${f}</b>`, 'g')

  }) 

  $( this ).html(mystr)  

});

Here's a codepen with it working
https://codepen.io/ederdiaz/pen/QJmmvg

answered Nov 23 at 3:01

EderChrono

1847

yes EderChrono, unfortunately my fruit table is quite big.
– mehdi
Nov 23 at 11:14

add a comment |

This might not be the most performant solution since it is iterating all fruits for each string, but if your fruits and .mystr set is not super big it should not be a problem:

var fruits = ["banana", "peach", "grappe", "lemon", "apple"];

$( ".mystr" ).each(function() {

  mystr = $( this ).html();

  fruits.forEach(f => {

    mystr = mystr.replace(f,`<b>${f}</b>`, 'g')

  }) 

  $( this ).html(mystr)  

});

Here's a codepen with it working
https://codepen.io/ederdiaz/pen/QJmmvg

answered Nov 23 at 3:01

EderChrono

1847

yes EderChrono, unfortunately my fruit table is quite big.
– mehdi
Nov 23 at 11:14

add a comment |

This might not be the most performant solution since it is iterating all fruits for each string, but if your fruits and .mystr set is not super big it should not be a problem:

var fruits = ["banana", "peach", "grappe", "lemon", "apple"];

$( ".mystr" ).each(function() {

  mystr = $( this ).html();

  fruits.forEach(f => {

    mystr = mystr.replace(f,`<b>${f}</b>`, 'g')

  }) 

  $( this ).html(mystr)  

});

Here's a codepen with it working
https://codepen.io/ederdiaz/pen/QJmmvg

answered Nov 23 at 3:01

EderChrono

1847

This might not be the most performant solution since it is iterating all fruits for each string, but if your fruits and .mystr set is not super big it should not be a problem:

var fruits = ["banana", "peach", "grappe", "lemon", "apple"];

$( ".mystr" ).each(function() {

  mystr = $( this ).html();

  fruits.forEach(f => {

    mystr = mystr.replace(f,`<b>${f}</b>`, 'g')

  }) 

  $( this ).html(mystr)  

});

Here's a codepen with it working
https://codepen.io/ederdiaz/pen/QJmmvg

answered Nov 23 at 3:01

EderChrono

1847

answered Nov 23 at 3:01

EderChrono

1847

answered Nov 23 at 3:01

EderChrono

1847

answered Nov 23 at 3:01

EderChrono

1847

yes EderChrono, unfortunately my fruit table is quite big.
– mehdi
Nov 23 at 11:14

add a comment |

yes EderChrono, unfortunately my fruit table is quite big.
– mehdi
Nov 23 at 11:14

yes EderChrono, unfortunately my fruit table is quite big.
– mehdi
Nov 23 at 11:14

add a comment |

const fruits = ["banana", "peach", "grappe", "lemon", "apple"];

const pattern = new RegExp(fruits.join('|'), 'g');

$(".mystr").each(function() {

  $(this).html(

    $(this).html().replace(pattern, '<b>$&</b>')

  );

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='container'>



  <div class='mystr'>I love apple </div>

  <div class='mystr'>I don't like banana</div>

  <div class='mystr'>I don't like peach</div>

  <div class='mystr'>I like both grappe and lemon</div>

</div>

(note that $& in a replacement string gets replaced with the entire matched substring for that match)

answered Nov 23 at 2:45

CertainPerformance

74.6k143659

Thank you for your reply, your solution is working as expected but is it ok if you know that in reality my fruit table may contain more than 4000 entry ?
– mehdi
Nov 23 at 11:11

I think it'll still work, though if you're working with that much data, it might take a bit longer than expected. Also, for something like this, you should consider fixing it server-side rather than client-side, I think, if it takes up any significant CPU time
– CertainPerformance
Nov 23 at 19:30

Did it work for you? When an answer solves the problem you're having, consider marking it as Accepted to indicate that the issue is resolved :)
– CertainPerformance
Nov 24 at 10:27

add a comment |

const fruits = ["banana", "peach", "grappe", "lemon", "apple"];

const pattern = new RegExp(fruits.join('|'), 'g');

$(".mystr").each(function() {

  $(this).html(

    $(this).html().replace(pattern, '<b>$&</b>')

  );

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='container'>



  <div class='mystr'>I love apple </div>

  <div class='mystr'>I don't like banana</div>

  <div class='mystr'>I don't like peach</div>

  <div class='mystr'>I like both grappe and lemon</div>

</div>

(note that $& in a replacement string gets replaced with the entire matched substring for that match)

answered Nov 23 at 2:45

CertainPerformance

74.6k143659

Thank you for your reply, your solution is working as expected but is it ok if you know that in reality my fruit table may contain more than 4000 entry ?
– mehdi
Nov 23 at 11:11

I think it'll still work, though if you're working with that much data, it might take a bit longer than expected. Also, for something like this, you should consider fixing it server-side rather than client-side, I think, if it takes up any significant CPU time
– CertainPerformance
Nov 23 at 19:30

Did it work for you? When an answer solves the problem you're having, consider marking it as Accepted to indicate that the issue is resolved :)
– CertainPerformance
Nov 24 at 10:27

add a comment |

const fruits = ["banana", "peach", "grappe", "lemon", "apple"];

const pattern = new RegExp(fruits.join('|'), 'g');

$(".mystr").each(function() {

  $(this).html(

    $(this).html().replace(pattern, '<b>$&</b>')

  );

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='container'>



  <div class='mystr'>I love apple </div>

  <div class='mystr'>I don't like banana</div>

  <div class='mystr'>I don't like peach</div>

  <div class='mystr'>I like both grappe and lemon</div>

</div>

(note that $& in a replacement string gets replaced with the entire matched substring for that match)

answered Nov 23 at 2:45

CertainPerformance

74.6k143659

const fruits = ["banana", "peach", "grappe", "lemon", "apple"];

const pattern = new RegExp(fruits.join('|'), 'g');

$(".mystr").each(function() {

  $(this).html(

    $(this).html().replace(pattern, '<b>$&</b>')

  );

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='container'>



  <div class='mystr'>I love apple </div>

  <div class='mystr'>I don't like banana</div>

  <div class='mystr'>I don't like peach</div>

  <div class='mystr'>I like both grappe and lemon</div>

</div>

(note that $& in a replacement string gets replaced with the entire matched substring for that match)

const fruits = ["banana", "peach", "grappe", "lemon", "apple"];

const pattern = new RegExp(fruits.join('|'), 'g');

$(".mystr").each(function() {

  $(this).html(

    $(this).html().replace(pattern, '<b>$&</b>')

  );

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='container'>



  <div class='mystr'>I love apple </div>

  <div class='mystr'>I don't like banana</div>

  <div class='mystr'>I don't like peach</div>

  <div class='mystr'>I like both grappe and lemon</div>

</div>

const fruits = ["banana", "peach", "grappe", "lemon", "apple"];

const pattern = new RegExp(fruits.join('|'), 'g');

$(".mystr").each(function() {

  $(this).html(

    $(this).html().replace(pattern, '<b>$&</b>')

  );

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='container'>



  <div class='mystr'>I love apple </div>

  <div class='mystr'>I don't like banana</div>

  <div class='mystr'>I don't like peach</div>

  <div class='mystr'>I like both grappe and lemon</div>

</div>

answered Nov 23 at 2:45

CertainPerformance

74.6k143659

answered Nov 23 at 2:45

CertainPerformance

74.6k143659

answered Nov 23 at 2:45

CertainPerformance

74.6k143659

answered Nov 23 at 2:45

CertainPerformance

74.6k143659

Thank you for your reply, your solution is working as expected but is it ok if you know that in reality my fruit table may contain more than 4000 entry ?
– mehdi
Nov 23 at 11:11

I think it'll still work, though if you're working with that much data, it might take a bit longer than expected. Also, for something like this, you should consider fixing it server-side rather than client-side, I think, if it takes up any significant CPU time
– CertainPerformance
Nov 23 at 19:30

Did it work for you? When an answer solves the problem you're having, consider marking it as Accepted to indicate that the issue is resolved :)
– CertainPerformance
Nov 24 at 10:27

add a comment |

Thank you for your reply, your solution is working as expected but is it ok if you know that in reality my fruit table may contain more than 4000 entry ?
– mehdi
Nov 23 at 11:11

I think it'll still work, though if you're working with that much data, it might take a bit longer than expected. Also, for something like this, you should consider fixing it server-side rather than client-side, I think, if it takes up any significant CPU time
– CertainPerformance
Nov 23 at 19:30

Did it work for you? When an answer solves the problem you're having, consider marking it as Accepted to indicate that the issue is resolved :)
– CertainPerformance
Nov 24 at 10:27

Thank you for your reply, your solution is working as expected but is it ok if you know that in reality my fruit table may contain more than 4000 entry ?
– mehdi
Nov 23 at 11:11

I think it'll still work, though if you're working with that much data, it might take a bit longer than expected. Also, for something like this, you should consider fixing it server-side rather than client-side, I think, if it takes up any significant CPU time
– CertainPerformance
Nov 23 at 19:30

Did it work for you? When an answer solves the problem you're having, consider marking it as Accepted to indicate that the issue is resolved :)
– CertainPerformance
Nov 24 at 10:27

add a comment |

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.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl