링크로 교체 단어를 검색

Question

내가 가진 내가이 단어에 대한 페이지를 검색하고 링크로 대체 할이

var words = [ 
    { 
     word: 'Something', 
     link: 'http://www.something.com' 
    }, 
    { 
     word: 'Something Else', 
     link: 'http://www.something.com/else' 
    } 
]; 

같은 배열입니다. 이 일을 효율적으로 할 수있는 방법이 있습니까? CPU가 배가 고있는 것 같습니다.

는

죄송는

이 인스턴스의 클래스 .message 각 요소를 검색 할 것 ... 더 exlained 있어야합니다. 그 안에있는 모든 단어를 찾으십시오.

또한 같은 것을 함께 할 수있을 것

Answer 1

이 배열 내에서 수백있을 것입니다 :

$('*:contains("string to find")'); 

이 방법의 문제는 "*"모든 요소를 ​​반환 할 것입니다 HTML, BODY 등을 포함한 문자열을 포함하고 있습니다. 그리고 그 후에도 각 요소의 텍스트 노드 내부에서 문자열을 찾아야하므로 모든 텍스트 노드를 확인하고 확인하는 것이 더 쉽습니다.

을 살펴 보시기 바랍니다.은 이미 (페이지 대신 텍스트를 강조 표시하는 대신) 원하는 것과 매우 비슷한 것을 수행하지만, source code에서 변경하기가 매우 쉽습니다.

Answer 2

좋은 전략은 다음과 같습니다

1) 그 키 값을 대체 할 수있는 링크가있는 대체 할 문구와이 객체를 구축합니다.

2) 그 일을하는 동안, 다음 키 중 하나와 일치 할 수있는 정규 표현식,

3) 대체 전역 해당 정규식을 사용을 구성.

거친 예 :

이

<div class="message">Somethsg1</div> 
    <div class="message">Something</div> 
    <div class="message">Ssething</div> 
    <div class="message">Something Else</div> 
    <div class="message">Something da</div> 
    <div class="message">Somethin2g</div> 

당신은 같은 것을 사용할 수 있습니다 :

//your array 
var words = [ 
    { 
     word: 'Something', 
     link: 'http://www.something.com' 
    }, 
    { 
     word: 'Something Else', 
     link: 'http://www.something.com/else' 
    } 
]; 
//iterate the array 
$.each(words, 
    function() { 
     //find an element with class "message" that contains "word" (from array) 
     $('.message:contains("' + this.word + '")') 
      //substitute html with a nice anchor tag 
      .html('<a href="' + this.link + '">' + this.link + '</a>'); 
    } 
); 

을이 솔루션은 하나의 즉각적인 문제를 생각합니다 (에 보여왔다

var replacementDict = { 
    'foo': 'http://www.foo.com/', 
    'bar': 'http://www.bar.net/' 
}; 
var theRegex = /\b(foo|bar)\b/g; 
theText.replace(theRegex, function(s, theWord) { 
    return "<a href='" + replacementDict[theWord] + "'>" + theWord + "</a>"; 
}); 

Answer 3

같은 일부 콘텐츠를 감안할 때 보기도). 예를 찾아 무언가가이고 이라면 뭔가 아름다운 것, "contains"가 일치합니다.

//for each array element 
$.each(words, 
    function() { 
     //store it ("this" is gonna become the dom element in the next function) 
     var search = this; 
     $('.message').each(
      function() { 
       //if it's exactly the same 
       if ($(this).text() === search.word) { 
        //do your magic tricks 
        $(this).html('<a href="' + search.link + '">' + search.link + '</a>'); 
       } 
      } 
     ); 
    } 
); 

그것은 먼저 모든 지연 성 근육통을 모든 배열 요소를 반복, 또는 다른 방법으로 주위할지 여부를 선택 : 당신은 엄격한 선택을 원하는 경우
, 당신은해야한다. 또한 검색 할 단어의 종류에 따라 달라집니다 ("이유"에 대한 두 가지 예 참조).

큰 경고 : 배열에 사용자 정의 콘텐츠가 포함되어있는 경우 요소의 html로 감추기 전에 위생을해야합니다!

Answer 4

위의 '주석'태그를 주석으로 처리하고 위의 주석 호출을 원할 경우. 시험해보기 :

var words = [ 
{ 
    word: 'Something', 
    link: 'http://www.something.com' 
}, 
{ 
    word: 'Something Else', 
    link: 'http://www.something.com/else' 
}]; 

var changeWordsWithLink = function (words) { 
if(document.getElementById && document.getElementsByTagName) { 
    var messages = document.getElementById('message'); 

    if(messages) { 
     for(i = 0; i < messages.length; i++){ 
      for (j = 0; j < words.length; j++) { 
       if(words[j].word == messages[i].innerHTML) { 
        messages[i].innerHTML = words[j].link; 
        //messages[i].innerHTML = wrapInATag(words[j].link, words[j].word); 
       } 
      } 
     } 
    } 
} 
} 

var wrapInATag = function(link, word) { 
    return '<a href="' + link + '">' + word + '</a>'; 
}