Jquery - 문자열에서 단어를 찾아서 <span> 태그로 바꾸기

Question

단어를 arg로 가져 와서 문자열로 찾아서 jquery/js로만 강조 표시하는 함수를 작성해야합니다.

jsfiddle.net/xzh2qmcd/ 

메신저는 이미 말씀을 얻고 여기에 같이 IndexOf를 얻을 수 있지만, 나는이 단어가 나타납니다 만 스팬 태그를 추가하는 방법을 잘 모릅니다.

도움이된다면 도움이 될 것입니다. 여기에서 다른 질문을 확인하고 무엇을해야하는지 이해할 수 없습니다.

Answer 1

는이 작업을 수행해야합니다

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

또는

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

gi-> 모든 대소 문자를 구분하지 일치하는 텍스트

$(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

아래 코드를 사용하여 원하는 것을 얻을 수 있습니다.

전체 단어 일치를 제공하기 위해 답변을 업데이트했습니다. 나는 당신이 그걸 찾고있을 것이라고 생각합니다.

예 : 당신이 국가를 검색하는 경우 다음 당신은 전체 단어를 검색하지 않을 경우 일어날 것이다, 국립 단어 색상해서는 안된다.

// 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); 

바이올린 다음 [도움말 센터]에서 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>