Newbie question: Stuck with getting styling to show from CSS and JS

Question

Inspired by this: Highlight a word with jQuery I'm looking to highlight specific words on a page. For context, it's a translated page but I wanted to be able to read through it, add desired words to a list and they would then be highlighted, rather than reformatting the html to highlight every instance of the word.

This was working until I changed the p to a span because I want the text boxes to wrap as an inline-block. I think this may have broken something:

$(document).ready(function() {

  function hiliter(word, element) {
    var rgxp = new RegExp("\\b" + word + "\\b", 'gi'); // g modifier for global and i for case insensitive 
    var repl = '<span class="sketch-highlight">' + word + '</span>';
    element.innerHTML = element.innerHTML.replace(rgxp, repl);

  }

  function hiliteWords(words, element) {
    words.forEach(word => {
      hiliter(word, element);
    });
  }

  //hiliter('dolor', document.getElementById('subs'));
  hiliteWords(['creo','think' 'mojado','wet'], document.getElementById('subs'));
});

span {
  display: inline-block;
  padding: 8px;
  border: 0px white;
  background-color: white;
  font-size: 19px;
  line-height: 1.825;
  color: #000000;
  font-family: Nunito, sans-serif;
}

body {
  margin-left: 1px;
  margin-right: 1px;
}


.sketch-highlight {
  position: relative;
}

.sketch-highlight::before {
  content: "";
  z-index: -1;
  left: 0em;
  top: 0em;
  border-width: 2px;
  border-style: solid;
  border-color: darkblue;
  position: absolute;
  border-right-color: transparent;
  width: 100%;
  height: 1em;
  transform: rotate(2deg);
  opacity: 0.5;
  border-radius: 0.25em;
}

.sketch-highlight::after {
  content: "";
  z-index: -1;
  left: 0em;
  top: 0em;
  border-width: 2px;
  border-style: solid;
  border-color: darkblue;
  border-left-color: transparent;
  border-top-color: transparent;
  position: absolute;
  width: 100%;
  height: 1em;
  transform: rotate(-1deg);
  opacity: 0.5;
  border-radius: 0.25em;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&family=Nanum+Pen+Script&display=swap" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body id='subs'>

<center> 

<span><small>It was, it was. And then in an instant, it wasn't.</small><br>Pues sí, pues sí. Y luego, en un instante, se paró.</span>
<span><small>- ¿Y por qué Jim no está mojado? - Yo… corrí más.</small><br>Why isn't Jim wet? I...outran it.</span>
<span><small>No creo que haya llovido. Si no, me dolería la cadera.</small><br>I don't think it rained. My hip would be hurting.</span>


</center></body></head></html>

I think I might need an array, but I have no idea how to do this — chipsndip, Oct 08 '21 at 23:34

score 0 · Answer 1 · answered Oct 09 '21 at 06:27

Yes, an array seems a good way to go.

What you can do is have an array of words and a function which receives these and then for each of them calls your hiliter function.

Here's a simple example:

$(document).ready(function() {

  function hiliter(word, element) {
    var rgxp = new RegExp("\\b" + word + "\\b", 'gi'); // g modifier for global and i for case insensitive 
    var repl = '<span class="sketch-highlight">' + word + '</span>';
    element.innerHTML = element.innerHTML.replace(rgxp, repl);

  };

  function hiliteWords(words, element) {
    words.forEach(word => {
      hiliter(word, element);
    });
  }

  //hiliter('dolor', document.getElementById('dolor'));
  hiliteWords(['dolor', 'ipsum', 'Aliquam'], document.getElementById('dolor'));
});

.sketch-highlight {
  position: relative;
}

.sketch-highlight::before {
  content: "";
  z-index: -1;
  left: 0em;
  top: 0em;
  border-width: 2px;
  border-style: solid;
  border-color: darkblue;
  position: absolute;
  border-right-color: transparent;
  width: 100%;
  height: 1em;
  transform: rotate(2deg);
  opacity: 0.5;
  border-radius: 0.25em;
}

.sketch-highlight::after {
  content: "";
  z-index: -1;
  left: 0em;
  top: 0em;
  border-width: 2px;
  border-style: solid;
  border-color: darkblue;
  border-left-color: transparent;
  border-top-color: transparent;
  position: absolute;
  width: 100%;
  height: 1em;
  transform: rotate(-1deg);
  opacity: 0.5;
  border-radius: 0.25em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body id='dolor'>
  <p>
    <small>Lorem ipsum more text dolor </small> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  </p>
  <p>
    Quisque bibendum sem ut lacus. Integer dolor ullamcorper libero. Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
  </p>

Just an observation: the hiliter function 'forgets' capitalisation if you search for an all lowercase word - it finds the word but if that is capitalised it puts the lowercase version back into the text.

Thank you! I changed some of the html and CSS and now I've broken it - would you be able to highlight where I've gone wrong please? I think the JS is still working but then is failing to apply the CSS styling — chipsndip, Oct 09 '21 at 13:01
You have a syntax error. Use your browser's dev tools inspect facility and go to its console. You will see the syntax error and the line it is on. The fault is in the array: ['creo','think' 'mojado','wet'], There should be a comma between each string. BTW this is really a different question. Next time best to close a question if it's been answered and open another one if there is an unrelated problem. — A Haworth, Oct 09 '21 at 13:08

Newbie question: Stuck with getting styling to show from CSS and JS

1 Answers1