javascript - Replace text with link to that text? - Stack Overflow

admin管理员组

文章数量:1415111

This is a follow up of my earlier question. I'm trying to use Greasemonkey to change the text in a <td> to a link that contains that text.

So the page contains

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

And I want to change it using Greasemonkey to:

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

So far, I've cobbled together this little bit of code, but I'm sure it's the wrong approach as I'm not getting anywhere:

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

What more do I need to do to make this work?

This is a follow up of my earlier question. I'm trying to use Greasemonkey to change the text in a <td> to a link that contains that text.

So the page contains

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

And I want to change it using Greasemonkey to:

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

So far, I've cobbled together this little bit of code, but I'm sure it's the wrong approach as I'm not getting anywhere:

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

What more do I need to do to make this work?

• javascript
• html
• greasemonkey

Share Improve this question Follow edited Jan 12, 2015 at 23:10 Brock Adams 93.7k2323 gold badges241241 silver badges305305 bronze badges asked Jan 12, 2015 at 15:23 Jaap BaandersJaap Baanders 5511 silver badge55 bronze badges 1

• 1. You need to start your href with a protocol (like http:// for instance) 2. getElementsByTagName returns an array of elements by Tag Name. There is no Tag 'something' in your code. Just an element with a class attribute 'something'. 3. If you try getElementsByTagName('td') you will get an array of all td elements, you could loop through with a for loop and check if $(reference[i]).hasClass('something'). – mondjunge Commented Jan 12, 2015 at 16:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Forget jQuery, it'll just slow your pages down. I haven't really tested this code, but it should work maybe with some debugging:

// ==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./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
})();

This is a fairly standard operation for a Greasemonkey script. jQuery's .wrapInner()^Doc and waitForKeyElements()^Example make it easy.

Your plete script would look like this:

// ==UserScript==
// @name     _Select text (re)linker
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github./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.\/q?='
                    + encodeURIComponent (this.textContent.trim () );

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

        return newLink;
    } );
}

本文标签： javascriptReplace text with link to that textStack Overflow