Quiero que la segunda ventana muestre la oración "Me gusta la manzana y el plátano, y la naranja y tal vez incluso las peras". con también "Banana" y "pears" resaltados en rojo, eso ignora el hecho de que la coma o el signo de interrogación siguen a las palabras. ¿Hay alguna forma de hacer esto sin agregar elementos a la matriz como "plátano" o "peras"?
const heroes = [" banana ", " pears ", " apple ", " orange "]; var regexFromMyArray = new RegExp(heroes.join("|"), 'ig'); $('#board').keyup(function(event){ document.getElementById('dummy').innerHTML = $('#board').html().replace(regexFromMyArray,function(str){ return '<span class="highlighted">'+str+'</span>' }) }) var target = $("#dummy"); $("#board").scroll(function() { target.prop("scrollTop", this.scrollTop) .prop("scrollLeft", this.scrollLeft); }); .color-red{ color: #F00; } .original { position:static; width: 70%; margin: 0 auto; padding: 1em; background: #fff; color: #000; height:100px; margin:2px; border:1px solid black; color:#fff; overflow:auto; } #dummy{ color:black; } #board{ z-index:11; background:transparent; color:black; caret-color: black; } .original span.highlighted { color:red; } #kommentarer{ z-index:11; background:transparent; color:black; caret-color: black; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <h3>Search text for fruits</h3> <br> <p>I want the second window to display the sentence "I like apple and banana, and orange and maybe even pears?" with "Banana" and "pears" highlighted in red, that is ignoring the fact that the comma or question mark follow the words</p></p> <br> <br> <p>Paste in the sentence here:</p> <div id="board" class="original" contenteditable="true"> </div> <br> <br> <p>The fruits are displayed in red:</p> <div id="dummy" class="original"> </div> <br> <br> </div>Dos cosas para cambiar:
\bAsi que:
const heroes = ["banana", "pears", "apple", "orange"]; var regexFromMyArray = new RegExp("\\b(" + heroes.join("|") + ")\\b", 'ig');