如何使用javascript更改HTML中不匹配单词的颜色 [英] How to change color for mismatch words in HTML using javascript

问题描述

我有 span 和输入字段;我在输入字段中输入该文本时，我想更改 span 中文本的颜色。

I have a span and an input field; I want to change the color of the text in span when I enter that text in input field.

以下是我的代码：

我想，如果我输入错误的单词，那么该单词将在红色中显示

i want, if i type wrong word then that word will red in span

var i=0;
var idx=0;
document.body.onkeydown = function(e){

    if(e.keyCode == 32 )
    
{
highlight();
}
}
function highlight() {
  var str= document.getElementById("pera").innerText.split(' ');
  var text= str[i];
  var wrdl = text.length;
  var inputText = document.getElementById("pera");
  var innerHTML = inputText.innerText;
	var pretext = innerHTML.slice(0, idx);
	var postext = innerHTML.slice(idx+text.length);
	
  if ( idx >= 0 && text!="")
    {      
var highlightedText = pretext;	
	  highlightedText += "<span class='highlight'>";
		highlightedText += text;
		highlightedText += "</span>";
		highlightedText += postext;
		 		document.getElementById("pera").innerHTML=highlightedText;
    }
	
i++;
idx += parseInt(text.length+1);
}

.highlight
{
background-color:yellow;

}

<span id="pera">This paragraph is a value of span</span>
</br>
<input type="text" id ="inp" onfocus="highlight();" />

推荐答案

此代码应以绿色突出显示匹配的部分，并以红色突出显示不匹配的部分。

This code should highlight in green the parts that match, and in red the parts that do not.

它的工作原理是查找第一次出现的文本的索引用户输入，并在其周围添加起始和结束< span> 标记。

It works by finding the index of the first occurrence of the text that the user entered, and adding the starting and ending <span> tags around it.

function highlight() {

  const text = "This paragraph is a value of span"; //The actual text to compair the value against

  var value = document.getElementById("in").value; //The input value

  var startingIndex = text.indexOf(value); //The string index where the value begins in the paragraph
  
  if (startingIndex!=-1) { //If the value is within the text
  
    var endingIndex = startingIndex+value.length; //The string index where the value ends is just the length of the value added to the starting index
  
    var highlightedText = text.slice(0,startingIndex); //The text from the beginning to the start of the highlight
    highlightedText += "<span style=\"color:green;\">"; //Add the HTML which will cause the highlight
    highlightedText += text.slice(startingIndex,endingIndex); //Add the text to highlight
    highlightedText += "</span>"; //Add the HTML which will cause the end of the highlight
    highlightedText += text.slice(endingIndex); //Add the remaining text
    
    document.getElementById("para").innerHTML = highlightedText; //Set the HTML of the paragraph to be the new, highlighted string that we made.
    
  }
  
}

<span id="para" style="color:red"><span style="color:green">This paragraph is</span> a value of span</span><br><br>
    
<input type="text" id="in" value="This paragraph is" oninput="highlight()">

这篇关于如何使用javascript更改HTML中不匹配单词的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！