Jquery - Finden Sie ein Wort in einer Zeichenfolge und wickeln Sie es mit <span> Tag

Question

Ich muss eine Funktion schreiben, die ein Wort als arg, finden Sie es in einer Zeichenfolge, und markieren Sie das Wort nur mit jquery/js.

jsfiddle.net/xzh2qmcd/ 

im bereits das Wort erhalten und die indexOf hier, aber ich weiß nicht, wie man eine der Span-Tag nur hinzuzufügen, wo dieses Wort erscheinen.

jede Hilfe, die wir gut sein, ich überprüfe einige andere Fragen hier und kann nicht verstehen, was ich tun sollte.

Answer 1

Sie müssen dies tun:

var txt = textDiv.replace(new RegExp(searchInput, 'gi'), function(str) { 
     return "<span class='highlight'>" + str + "</span>" 
    }); 

oder

var txt = textDiv.replace(
        new RegExp(searchInput, 'gi'), 
        "<span class='highlight'>$&</span>"); 

gi-> alle Groß- und Kleinschreibung passenden Text

$(document).ready(function() { 
 
    // globals 
 
    var searchInput; 
 
    var textDiv; 
 

 
    $('.searchBtn').click(function(event) { 
 

 
    event.preventDefault(); 
 

 
    // set the values of the search and the text 
 
    searchInput = $('.searchInput').val(); 
 
    textDiv = $('.textDiv').text(); 
 
    var reg = new RegExp(searchInput, 'gi'); 
 
    var txt = textDiv.replace(reg, function(str) { 
 
     return "<span class='highlight'>" + str + "</span>" 
 
    }); 
 
    $('.textDiv').html(txt); 
 
    }); 
 
});

.textDiv { 
 
    height: 100px; 
 
    width: 500px; 
 
    text-align: center; 
 
    padding: 20px; 
 
    margin: 0 auto; 
 
} 
 

 
.highlight { 
 
    background: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="main"> 
 
    <div class="searchDiv"> 
 
     <h3> Mask A Word In The Text: </h3> 
 
     <label> 
 
     <input class="searchInput" type="text" value = "iS"/> </label> 
 
     <button class="searchBtn" type="button"> Search </button> 
 
    </div> 
 

 
    <div class="textDiv"> 
 
     Bastille Day is the common name given in English-speaking countries to the French National Day, which is celebrated on 14 July each year. In France, it is formally called La fête nationale (French pronunciation: ​[la fɛːt nasjɔnal]; The National Celebration) IS Is 
 
     and commonly Le quatorze juillet. (French pronunciation: ​[lə katɔʁz(ə) ʒɥijɛ]; the fourteenth of July). 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

können Sie die gewünschten mit dem untenstehenden Code erreichen.

Ich habe meine Antwort aktualisiert, um eine vollständige Übereinstimmung zu bieten. Ich denke, du wirst nur danach suchen.

Beispiel: Wenn Sie nationale dann suchen sie nationale Wort nicht Farbe sollte, was, wenn Sie nicht für eine vollständige Wortsuche gehen passieren wird.

// search for the input in the paragraph 
     if (textDiv.toLowerCase().indexOf(searchInput.toLowerCase()) >= 0) { 
     console.log("match"); 
     textDiv = textDiv.replace(new RegExp('\\b('+searchInput+')\\b', 'gi'),'<span class="highlight">$1</span>'); 


     $('.textDiv').html(textDiv); 

Fiddle: http://jsfiddle.net/xzh2qmcd/3/

Answer 3

$(document).ready(function() { 
 
    // globals 
 
    var searchInput; 
 
    var textDiv; 
 

 
    $('.searchBtn').click(function(event) { 
 

 
     event.preventDefault(); 
 

 
     // set the values of the search and the text 
 
     searchInput = $('.searchInput').val(); 
 
     textOfDiv = $('.textDiv').text(); 
 

 
     // search for the input in the paragraph 
 
     if (textOfDiv.indexOf(searchInput) >= 0) { 
 
     console.log("match"); 
 
\t \t \t \t \t var newText = textOfDiv.split(searchInput).join('<span class="highlight">' + searchInput + '</span>'); 
 
$('.textDiv').html(newText); 
 
} 
 
     else { 
 
     console.log("no match"); 
 
     } 
 
    }); 
 
});

.textDiv { 
 
    height:100px; 
 
    width:500px; 
 
    text-align:center; 
 
    padding:20px; 
 
    margin:0 auto; 
 
} 
 

 
.highlight { 
 
    background:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="main"> 
 
     <div class="searchDiv"> 
 
        <h3> Mask A Word In The Text: </h3> 
 
        <label> <input class="searchInput" type="text" /> </label> 
 
        <button class="searchBtn" type="button"> Search </button> 
 
     </div> 
 

 
     <div class="textDiv"> 
 
       Bastille Day is the common name given in 
 
       English-speaking countries to the French National Day, 
 
       which is celebrated on 14 July each year. In France, 
 
       it is formally called La fête nationale (French pronunciation: ​[la fɛːt nasjɔnal]; The National Celebration) 
 
       and commonly Le quatorze juillet. 
 
       (French pronunciation: ​[lə katɔʁz(ə) ʒɥijɛ]; the fourteenth of July). 
 
     </div> 
 
    </div> 
 
</div>

$(document).ready(function() { 
 
    // globals 
 
    var searchInput; 
 
    var textDiv; 
 

 
    $('.searchBtn').click(function(event) { 
 

 
     event.preventDefault(); 
 

 
     // set the values of the search and the text 
 
     searchInput = $('.searchInput').val(); 
 
     textOfDiv = $('.textDiv').text(); 
 

 
     // search for the input in the paragraph 
 
     if (textOfDiv.toLowerCase().indexOf(searchInput) >= 0) { 
 
     console.log("match"); 
 
\t \t var newText = textOfDiv.split(searchInput).join('<span class="highlight">' + searchInput + '</span>'); 
 
$('.textDiv').html(newText); 
 
} 
 
     else { 
 
     console.log("no match"); 
 
     } 
 
    }); 
 
});

.textDiv { 
 
    height:100px; 
 
    width:500px; 
 
    text-align:center; 
 
    padding:20px; 
 
    margin:0 auto; 
 
} 
 

 
.highlight { 
 
    background:red; 
 
}

<div class="container"> 
 
    <div class="main"> 
 
     <div class="searchDiv"> 
 
        <h3> Mask A Word In The Text: </h3> 
 
        <label> <input class="searchInput" type="text" /> </label> 
 
        <button class="searchBtn" type="button"> Search </button> 
 
     </div> 
 

 
     <div class="textDiv"> 
 
       Bastille Day is the common name given in 
 
       English-speaking countries to the French National Day, 
 
       which is celebrated on 14 July each year. In France, 
 
       it is formally called La fête nationale (French pronunciation: ​[la fɛːt nasjɔnal]; The National Celebration) 
 
       and commonly Le quatorze juillet. 
 
       (French pronunciation: ​[lə katɔʁz(ə) ʒɥijɛ]; the fourteenth of July). 
 
     </div> 
 
    </div> 
 
</div>