通過jQuery將段落中的所有更長的單詞轉換爲鏈接

-3

我遇到了一些實驗性問題。大概只有jQuery的大師可以幫助我在這裏:)通過jQuery將段落中的所有更長的單詞轉換爲鏈接

我有一個段落：

<p>Lorem Ipsum is simply dummy text of the printing 
and typesetting industry. Lorem Ipsum has been the 
industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and 
scrambled it to make a type specimen book.</p>

，我需要轉換所有的話至少4個字符「上即時」的onMouseOver用jQuery幫助從每個詞創建的鏈接。

我不希望它生成的HTML（因爲帶寬的，它會增長到兆），該代碼將看起來像：

<p> 
<a href="https://stackoverflow.com/search?q=Lorem">Lorem</a> 
<a href="https://stackoverflow.com/search?q=Ipsum">Ipsum</a> 
is 
<a href="https://stackoverflow.com/search?q=simply">simply</a> 
......... 
</p>

我的onMouseOver也明白任何文字修飾。

來源

2012-11-02 Gabriel

我試過的東西：$（ '＃文本> P'）綁定（ '的mouseenter'，callFunction）;和.children（）選擇器，但它沒有奏效。 – Gabriel

如果我不能解決，我必須使用這個doubleclick演示： http://jsfiddle.net/oscarj24/5D4d3/ – Gabriel

嘗試這樣：

$("p").on("hover", function(){ 
    var content = $("p").text(); 
    var words = content.split(" "); 
    var length = words.length; 
    var newContent = []; 

    for(var i = 0; i < length; i++){ 
     if(words[i].length >= 4){ 
      newContent.push("<a href='/search?q=simply'>" + words[i] +"</a>") 
     }else{ 
      newContent.push(words[i]) 
     } 
    }  
    $(this).text(""); 
    $(this).html(newContent.join(" "));    
});

這不會，但是，你懸停並會爲每一個懸停事件運行後刪除a標籤。對於這兩個問題可能會有修正，但我會將這些問題留給你弄清楚。

EXAMPLE

來源

2012-11-02 17:28:28 Chase

太棒了，我已經修改它一點點：http://jsfiddle.net/N9WQt/2/ 我可以生活在沒有文字裝飾onMouseOver。現在對我來說這看起來很容易理解。謝謝！ – Gabriel

很高興幫助。如果你需要其他東西，那就讓我知道。謝謝 – Chase

添加到您的document.ready或document.load電話：

$('p').on('hover', 'a', function(){ /* do whatever needs to be done on your link */}); 
var new_text = []; 
$.each($('p').text().split(" "), function(index, word) { 
    if (word.length >= 4) { 
     word = word.replace(/(\w*)/, '<a href="YOUR URL HERE">\1</a>'); 
    } 
    new_text.push(word); 
}); 
var new_text_as_str = new_text.join(" "); 
$('p').html(new_text_as_str);

來源

2012-11-02 17:28:31 Derek

不知道如何高效，這是，但是：

$('p').hover(function(){ 
    var txt = $(this).text(); 
    txt = txt.replace(/\b([a-z]{4,})\b/ig, '<a class="word" href="https://stackoverflow.com/search?q=$1">$1</a>'); 
    $(this).html(txt); 
}, function(){ 
    $('a.word', this).each(function(){ 
     $(this).replaceWith($(this).text()); 
    }); 
});

它添加鏈接在mouseenter上，並在mouseleave上刪除它們。。

DEMO：http://jsfiddle.net/8Yqfb/

來源

2012-11-02 17:29:50

通過jQuery將段落中的所有更長的單詞轉換爲鏈接

回答

相關問題