2016-03-25 9 views
-4

Mevcut bir web uygulamasında geliştirmeler eklemek için nihayetinde bazı özelliklere sahip olmak istediğim bir Chrome uzantısı yapıyorum. Bu özelliklerden birincisi, varolan bir web sitesinde belirli sayfaların belirli öğelerine bir miktar gezinti (aka araç ipucu veya fare üstü metin) eklemek olacaktır. Ne yazık ki sayfada eklemek istediğim sayfalarda yer alan herhangi bir özel ID etiketine başvurmamaya gerek yok, bu yüzden sayfada metnin benzersiz kısımlarını değiştireceğimi düşündüm. Yani buradaJavascript'te varolan bir web sayfasına, kimliğini etiket kullanmadan hover üzerine yazılan metni nasıl ekleyebilirim?

orijinal web sayfasının kod bir örnektir: Bana bunun JavaScript vurgulu-over metinde ekler sonra benzemek istiyorum ne

<html> 
<table> 
<tr> 
    <td>First Name</td> 
    <td>Last Name</td> 
</tr> 
<tr> 
    <td>John</td> 
    <td>Smith</td> 
</tr> 
</table> 
</html> 

Ve (Bu arada açığım vurgulu-over metin ... Ben yayılma başlık etiketlerinin uygulanması biliyorum) Chrome'da çalışır sürece vurgulu-over metne sahip olarak, uygulandığı:

<html> 
<table> 
<tr> 
    <td><span title="First Name of the student">First Name</span></td> 
    <td><span title="Last Name of the student">Last Name</span></td> 
</tr> 
<tr> 
    <td>John</td> 
    <td>Smith</td> 
</tr> 
</table> 
</html> 

Bu defa olması JavaScript olduğunu. Çalışıyor, ancak daha verimli hale getirmenin bir yolu var mı, yoksa bunu yapmanın daha iyi bir yolu var mı?

document.body.innerHTML = document.body.innerHTML 
    .replace(/>First Name</g, '><span title="First Name of the student">First Name</span><') 
    .replace(/>Last Name</g, '><span title="Last Name of the student">Last Name</span><'); 

netlik için sorumu yeniden yazmak için fırsat bir ederiz, Yardımlarınız için şimdiden teşekkür ederiz.

+2

yerine düğüm, Node.replaceChild() ait eşleşti metin içeriği kontrol etmek için. DOM bir dize değil. DOM bir dize değil. DOM'ı bir dizgiymiş gibi manipüle etmeyeceğim. DOM'ı bir dizgiymiş gibi manipüle etmeyeceğim. –

+0

Bazı span başlıklarını enjekte etmenin daha iyi bir yolu ne olurdu? – user3513237

+0

Soru "js" konumunda değiştirilecek metni içeren tagName öğeleri nelerdir? – guest271314

cevap

-1

Değiştirilecek geçerli öğe metniyle eşleşen özelliklere sahip bir nesne oluşturabilir, title özniteliğinde ayarlamak için metin içeren değerler; document.body.childNodes'u yinelemek için .forEach() veya for döngüsünü kullanın; Object.hasOwnProperty() benden sonra bu tekrarlayın yapmayın düğümünü

var re = { 
 
    "Stu#": "Student Number", 
 
    "Last Name": "Student Last Name", 
 
    "First Name": "First Name of the student" 
 
}; 
 

 
document.body.childNodes 
 
.forEach(function(el) { 
 
    var text = (el.nodeValue || el.textContent).trim(); 
 
    if(re.hasOwnProperty(text)) { 
 
    var span = document.createElement("span"); 
 
    span.textContent = text; 
 
    span.setAttribute("title", re[text]); 
 
    el.parentNode.replaceChild(span, el); 
 
    } 
 
});
<i>Stu#</i> 
 
<i>Last Name</i> 
 
<i>First Name</i>

+0

Bkz. Http://stackoverflow.com/questions/36108712/foreach-method-of-node-childnodes – guest271314

İlgili konular