时间戳

首页 > 解决方案 > 使用 JavaScript 创建一个包含特定 CSS 关键字的句子

javascript - 使用 JavaScript 创建一个包含特定 CSS 关键字的句子

问题描述

我想造句。但是，根据 JSON 中包含的字典，在这句话中有包含特定 CSS 的关键字。

我不知道如何考虑字典单词的 CSS 和我句子的其余部分来正确显示它。

例如，我得到一个句子：

我的网线有问题....

在我的字典中的 JSON 文件中出现问题我希望它获得特定的 CSS。问题应以红色显示。

我只能显示关键字。我不知道如何重构我的句子。

        for (let i = 0; i < features.length; i++) {
            for (let j = 0; j < newDataLime.length; j++) {
                if (features[i] === newDataLime[j].label) {
                    console.log(newDataLime[j].rgba);
                    spanCounter ++ 
                    // Max 12 span by each line for ver
                    if(spanCounter == 12){
                        spanCounter = 0;
                    }
                       fieldText.innerHTML = fieldText.innerHTML +  `<span class="verbatim-dashboard__text__lime hide" style="background-color: ${newDataLime[j].rgba};">${features[i]}</span>`;
                    }
                }
            }

特征是一个表格，其中包含我句子中的所有单词切到每个空格。因此，对于我们的示例，它包含 ["I"、"Have"、"Problem" ... 等]

变量 newDataLime 包含字典的关键字。

我怎样才能正确地形成我的句子？

我希望我已经足够清楚了。先感谢您！

标签： javascripthtmlarrays

解决方案

您应该尝试用程式化的 word替换句子数组中的单词。

然后，当你的数组被完全计算出来时，你就可以把它放在任何 DOM 元素中：

for (let i = 0; i < features.length; i++) {
  for (let j = 0; j < newDataLime.length; j++) {
    if (features[i] === newDataLime[j].label) {
      console.log(newDataLime[j].rgba);
      spanCounter++
      // Max 12 span by each line for ver
      if (spanCounter == 12) {
        spanCounter = 0;
      }
      features[i] = `<span class="verbatim-dashboard__text__lime hide" style="background-color: ${newDataLime[j].rgba};">${features[i]}</span>`;
    }
  }
}

fieldText.innerHTML = features.join(" ");

推荐阅读