trouver un mot dans un textes : html, javascript ,css sans Jquery

**belykia** · 24/02/2018, 00h27

le but de l'exercice ,ecrire un code qui cherche un caractere ou un mot dans un texte comme dans les photos , celle d'avant Nom : partir.png
Affichages : 1318
Taille : 67,5 Ko

Nom : partir.png
Affichages : 1318
Taille : 67,5 Ko

et d'apres Nom : apres.png
Affichages : 1223
Taille : 69,4 Ko

, les espaces ne doivent pas etre compter,ce qui veut dire ils ne doivent pas etre souligner .

j'ai cree le texte html comme dans la page , mais je me suis bloque dans le code javascript , le voila c'est le suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>SEARCH</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 
 
 </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-5">
          <form class="form-group" action="index.html" method="post">
            <input type="text" name="" value="" id = "input" onkeyup="myFunction()" placeholder="cerca">
            <button class ="Btn btn-danger" type="button" name="button"  >CERCA</button>
          </form>
          <h1>search</h1>
          <p class="text-justify" id = "text">
           Mount Sinabung is a volcano. It is on Sumatra. It is dormant for 400 years. In 2010, it erupts. It kills twenty-five people between 2010 and 2018.
 
This week, the volcano erupts again. Big clouds of ash go up into the sky. Nobody dies, and nobody is injured.
 
Difficult words: dormant (‘asleep’), erupt (send out lava and ash), ash (dust; a very soft grey thing produced from things on fire).
 
You can watch the original video in the Level 3 section.
          </p>
        </div>
      </div>
    </div>
    <script >
     var s = document.getElementById("text").innerHTML;
var splt = s.split(/\W+/);
 
function usersInput() {
    return document.getElementById("input").value;
}
var myArray = [""];
 
for(  i = 1; i < splt.length ; i++ ){
  myArray.push(splt[i]);
}
console.log(myArray);
text="<span>" + myArray[0] + "</span>";
for(  i = 1; i < myArray.length ; i++ ){
text += text="<span>" + myArray[i] + "</span>";
}
console.log(text);
var users = usersInput();
if(users!=null){
var use = users ;
console.log(use);
var word="<span>" + use + "</span>";
console.log(word);
for(  var k = 0; k < text.length ; k++ ){
if(word.localeCompare(text[k])==0){
 
}
}
}
 
    </script>
  </body>
</html>

QUI peut m'aider a le terminer ??? et me l'expliquer .

**IsmailChamssi** · 29/08/2018, 11h28

Parce que je suis gentil

Voici un code qui fonctionne dans ton exemple.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function myFunction() {
		 var term = document.getElementById("input").value;
		 var s1 = document.getElementById("text").innerHTML;
 
		 var s2 = s1.replace(new RegExp("<span style=\"background-color:powderblue;\">", 'g'),"")
					.replace(new RegExp("</span>",'g'),"");
 
		if(term !== "")
		{
			var s3 = s2.replace(new RegExp(term, 'g'), "<span style=\"background-color:powderblue;\">" + term + "</span>");
			document.getElementById("text").innerHTML = s3;
		}
		else
		{
			document.getElementById("text").innerHTML = s2;
		}
	}

trouver un mot dans un textes : html, javascript ,css sans Jquery

Développement Web avec .NET

Discussions similaires

Partager

Partager