Заменить текст ссылкой на этот текст?

Question

Это продолжение моего предыдущего вопроса. Я пытаюсь использовать Greasemonkey, чтобы изменить текст в <td> на ссылку, содержащую этот текст.

Так страница содержит

<td class="something"><div style="width: 200px;"> 
    randomtext 
</div></td> 

И я хочу, чтобы изменить его с помощью Greasemonkey для:

<td class="something"><div style="width: 200px;"> 
    <a href="www.somewhere.com/q?=randomtext">randomtext</a> 
</div></td> 

До сих пор, я починил этот маленький кусочек кода, но я уверенный, что это неправильный подход, поскольку я никуда не гожусь:

// ==UserScript== 
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js 
// ==/UserScript== 
(function() { 
    var reference = document.getElementsByTagName('something') 
    var replacement = reference.replace(reference, "www.somewhere.com/q?=" + reference) 
    document.getElementById("user-reference-value").innerHTML = replacement; 
})(); 

Что еще мне нужно сделать, чтобы сделать эту работу?

Answer 1

Забудьте jQuery, он просто замедлит ваши страницы. я действительно не проверял этот код, но он должен работать, возможно, с некоторой отладки:

// ==UserScript== 
// ==/UserScript== 
(function() { 
    // collect variables 
    // you can change this to change which element you replace 
    var reference = document.querySelector('td.something>div:first-child'); 
    var text = reference.innerText; 
    var replacement = text.replace(reference, "www.somewhere.com/q?=" + reference); 

    // create new anchor tag 
    var a = document.createElement('a'); 
    a.href = replacement; 
    a.innerText = text; 

    // do the replacement 
    reference.innerHTML = ''; // clear the old contents of the reference 
    reference.appendChild(a); // append the new anchor tag into the element 
})(); 

Answer 2

Это довольно стандартная операция для Greasemonkey сценария. jQuery's .wrapInner()^Doc и waitForKeyElements()^Example облегчают работу.

Ваш полный сценарий будет выглядеть следующим образом:

// ==UserScript== 
// @name  _Select text (re)linker 
// @include http://YOUR_SERVER.COM/YOUR_PATH/* 
// @require http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js 
// @require https://gist.github.com/raw/2625891/waitForKeyElements.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. 
*/ 
waitForKeyElements (".something > div", linkifyText); 

function linkifyText (jNode) { 
    jNode.wrapInner (function() { 
     var newHref = 'http:\/\/www.somewhere.com\/q?=' 
        + encodeURIComponent (this.textContent.trim()); 

     //-- Note that link text will be filled in automatically. 
     var newLink = '<a href="' + newHref + '"></a>'; 

     return newLink; 
    }); 
}