javascript 如何更改字符串中多个特定单词的颜色？

yshpjwxd 于 2023-11-15 发布在 Java

关注(0)|答案(3)|浏览(456)

我试图创建一个函数，它可以读取一个大的文本字符串，自动检测关键字，然后更改这些单个单词的颜色。例如，在句子中，“他走到商店，然后他走到他的房子，”我希望函数单独检测单词“他”，并将文本颜色更改为绿色，同时也检测到单词“walked”，将文本颜色更改为红色，而不更改句子的其余部分。这将是一个更大的规模与更多的关键字和颜色。
我已经达到了这样的程度，我可以让我的程序检测到一个用or写的文本字符串中的某些单词，但是当我试图通过那里改变单词的颜色时，它改变了字符串中所有单词的颜色（通过改变CSS），这不是我想要的。我还让它改变了a中的单个单词，但是它也改变了其他部分中的单词。
我也很难让它改变不同的关键字，例如，当它使用的颜色绿色为“走过”时，它实际上应该是红色的。我不想手动使用周围的每一个字，所以我想找到一种方法来自动做到这一点。

JavaScript

来源：https://stackoverflow.com/questions/77485309/how-can-i-change-the-color-of-multiple-specific-words-in-a-string

3条答案

按热度按时间

sgtfey8w1#

试试这个例子。
该功能用于单独检测单词“he”并将文本颜色改变为绿色，同时还检测单词“walked”以将文本颜色改变为红色而不改变句子的其余部分。

<html lang="en">
<head>
  <title>Coloring Words</title>
  
  <!-- Include jQuery from a CDN (Content Delivery Network) -->
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  
</head>
<body>
  <div id="coloredText">he walked to the store and then he walked to his house</div>
 
</body>
</html>

.green {
  color: green;
}
.red {
  color: red;
}

$(document).ready(function() {
  var coloredText = $("#coloredText").text();
  var keywordClasses = {
    "he": "green",
    "walked": "red",
   
  };
  var words = coloredText.split(/\s+/);
 
  for (var i = 0; i < words.length; i++) {
    var word = words[i].toLowerCase(); // Convert to lowercase for case-insensitivity
    var cssClass = keywordClasses[word];
    if (cssClass) {
      words[i] = "<span class='" + cssClass + "'>" + words[i] + "</span>";
    }
  }
 
  $("#coloredText").html(words.join(' '));
});

展开查看全部

赞(0）回复(0）举报 2023-11-15

cig3rfwq2#

对于纯JavaScript，您可以这样做

// Original string
const original = 'he walked to the store and then he walked to his house,'
// Set original string
document.querySelector("#original").innerText = original
// On form submit
document.querySelector("form").addEventListener("submit", onSubmit)
// On form submit handler
function onSubmit(event) {
  event.preventDefault()
  // Styled output
  let output = original
  
  // Get text to be converted to green
  const greenText = document.querySelector("#toGreen").value
  // Get text to be converted to yellow
  const yellowText = document.querySelector("#toYellow").value
  // Change all `greenText` to green and return
  output = changeColor(output, greenText, 'green')
  // Change all `yellowText` to yellow and return
  output = changeColor(output, yellowText, 'yellow')
  // Print styled string to screen
  document.querySelector("#styled").innerHTML = output
}
function changeColor(string, text, color) {
  return string.replace(text, `<span style="color: ${color}">${text}</span>`)
}

个字符
在片段中，输入需要更改为“绿色”和“黄色”的单词。然后按Submit x
要实际更改字符串中的单词颜色，您需要将其 Package 在<span/>中。
changeColor方法将在<span/> and change it color, then return the styled string. Then you can put this styled string in元素中 Package 特定的单词。innerHTML`

展开查看全部

赞(0）回复(0）举报 2023-11-15

enyaitl33#

让我们看看为什么你的方法可能有问题：

你的模式可能不匹配整个单词，这就是为什么它改变了其他部分的单词。
你没有颜色分配方法
我们如何修复它：
我们可以有一个方法getWordAndColor来将颜色设置为单词
我们可以有另一种方法来改变句子的词指定的颜色

const getWordAndColor = () => {
        let wordAndColor = {};
        wordAndColor['he'] = 'green';
        wordAndColor['walked'] = 'red';
        wordAndColor['store'] = '#4682B4';
        return wordAndColor;
    }
    const setColorToWord = (wordAndColor, sentence) => {
        for (let key in wordAndColor) {
            if (wordAndColor.hasOwnProperty(key)) {
                let value = wordAndColor[key];
                let dynamicPattern = key;
                let pattern = new RegExp("\\b" + dynamicPattern + "\\b", 'gi');
                let replacement = '<span style="color: '+value+';">'+key+'</span>';
                sentence = sentence.replace(pattern, replacement);
            }
        }
        return sentence;
    }
    let sentence = "he walked to the store and then he walked to his house,";
    let wordAndColor = getWordAndColor();
    document.getElementById('wordAndColorText').innerHTML = setColorToWord(wordAndColor, sentence);

个字符

展开查看全部

赞(0）回复(0）举报 2023-11-15

我来回答

javascript 如何更改字符串中多个特定单词的颜色？

3条答案

相关问题

热门标签

最新问答