新手问题：无法从 CSS 和 JS 中显示样式答案

【问题标题】：Newbie question: Stuck with getting styling to show from CSS and JS新手问题：无法从 CSS 和 JS 中显示样式
【发布时间】：2021-11-28 19:18:42
【问题描述】：

受此启发：Highlight a word with jQuery 我希望突出显示页面上的特定字词。对于上下文，这是一个翻译页面，但我希望能够通读它，将所需的单词添加到列表中，然后将它们突出显示，而不是重新格式化 html 以突出显示单词的每个实例。

这一直有效，直到我将 p 更改为跨度，因为我希望文本框包装为内联块。我认为这可能破坏了某些东西：

$(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>

【问题讨论】：

我想我可能需要一个数组，但我不知道该怎么做

标签： javascript html css styles styling

【解决方案1】：

是的，数组似乎是个好方法。

您可以做的是拥有一个单词数组和一个接收这些单词的函数，然后为每个单词调用您的 hiliter 函数。

这是一个简单的例子：

$(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>

只是一个观察：如果您搜索全小写的单词，hiliter 函数会“忘记”大写 - 它会找到该单词，但如果是大写的，它会将小写版本放回文本中。

【讨论】：

谢谢！我更改了一些 html 和 CSS，现在我把它弄坏了——你能强调一下我哪里出错了吗？我认为 JS 仍在工作，但未能应用 CSS 样式
您有语法错误。使用浏览器的开发工具检查工具并转到其控制台。您将看到语法错误及其所在的行。错误在数组中：['creo','think''mojado','wet']，每个字符串之间应该有一个逗号。顺便说一句，这真的是一个不同的问题。下次最好关闭已回答的问题，如果有不相关的问题则打开另一个问题。