이미지를 텍스트로 바꾸기

Question

일련의 ID없는 연결된 이미지가있는 웹 페이지를 가져 와서 굵은 텍스트로 바꾸는 Greasemonkey 스크립트를 작성하려고합니다.

불행하게도 몇 가지 막 다른 골목으로 이어지고 있습니다.

먼저 어떤 이유로 든 코드가 이미지를 [클릭] 텍스트로 바꾸고 즉시 부모를 통해 실행/다시 바꾸고 [클릭]을 지 웁니다.

둘째로, 나는 createTextNode를 굵게 표시하는 좋은 방법이 없다는 의심의 여지가 있습니다.

그래서 누가 루프가 저에게 효과적이지 않은지 설명 할 수 있습니다. # 2는 추가 된 텍스트를 굵게 표시 할 수 있도록 올바른 방법을 알려줍니다.

var smiliesList = document.evaluate(
"//img[contains(@src,'smilies')]", document.body, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); 

var prefixReplace = document.createTextNode('[CLICK]'); 
var prefixImgSrc = ('smilies/goofyimage.png') 


for (var i=0;i<smiliesList.snapshotLength;i++) { 

    var node = smiliesList.snapshotItem(i); 

     if (node.src == prefixImgSrc) { 

      node.parentNode.replaceChild(prefixReplace, node); 


    }} 

Answer 1

여기 전체 스크립트이 jQuery에 얼마나 쉽게 :

// ==UserScript== 
// @name  _YOUR_SCRIPT_NAME 
// @include http://YOUR_SERVER.COM/YOUR_PATH/* 
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js 
// @grant GM_addStyle 
// ==/UserScript== 
/*- The @grant directive is needed to work around a design change 
    introduced in GM 1.0. It restores the sandbox. 
*/ 

// smilies/goofyimage.png is case-sensitive 
var goofyImages = $("img[src*='smilies/goofyimage.png']"); 

goofyImages.replaceWith ("<b>[CLICK]</b>"); 

이 사용 :

• jQuery's Attribute Contains Selector
• jQuery's replaceWith()

Answer 2

나는 루프가 진행되는 동안 각 이미지에 대해 새 대체 텍스트 노드를 만들어야한다고 생각합니다. 현재 루프 이전에 단일 노드 만 작성 중입니다.

또한 굵은 텍스트를 만들려면 <b> 요소를 만든 다음 innerHTML을 사용하여 텍스트를 삽입하십시오.

var smiliesList = document.evaluate(
"//img[contains(@src,'smilies')]", document.body, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); 

var len = smiliesList.snapshotLength; 

for (var i=0; i<len; i++) { 
    var node = smiliesList.snapshotItem(i), 
     p; 

    if (node.src.indexOf('smilies/goofyimage.png') > -1) { 
     var textNode = document.createElement('b'); 
     textNode.innerHTML = '[CLICK]';  

     if (node.parentNode) { 
     p = node.parentNode; 
     p.removeChild(node); 
     p.appendChild(textNode);    
     }  
    } 
} 

또한 더 나은 방법이 있다고 생각합니다. 나는이 버전으로 갈 것을 권 해드립니다 - 코드와 더 브라우저 호환성 적은 라인 :

var imgs = document.getElementsByTagName('img');   
for (var i = imgs.length - 1; i >= 0; i--) { 
    if (imgs[i].src.indexOf('smilies/goofyimage.png') > -1) { 
     var textNode = document.createElement('b'); 
     textNode.innerHTML = '[CLICK]';  
     imgs[i].parentNode.replaceChild(textNode, imgs[i]);  
    } 
}