1

I'm trying to turn a set of keywords into links on my site. I am currently using this code which will turn one keyword into a link. However, now I want to expand it to have several words. The link will always be the same, however, the keyword changes, so the link text must also reflect that.

Here is the code I am currently using:

<script type="text/javascript">
(function($) {
  var thePage = $("body");
  thePage.html(thePage.html().replace(/Wedding Stationery/ig, '<a class="discrete" href="http://www.kateguest.com">wedding stationery</a>'));
})(jQuery)
</script>

How can I expand this to use 5 or 6 keywords?

Sam Skirrow
  • 3,647
  • 15
  • 54
  • 101
  • You will have to define an array of terms to search against. Then, you'll have to loop over the array and check for the keyword's existence on the page, then perform the replace. – Ohgodwhy Jul 25 '13 at 19:18
  • A good start would be to not use regex to modify raw HTML – mplungjan Jul 25 '13 at 19:19
  • @mplungjan I'm afraid I don't know what that means – Sam Skirrow Jul 25 '13 at 19:21
  • possible duplicate of [Jquery find all elements with text](http://stackoverflow.com/questions/3091360/jquery-find-all-elements-with-text) – mplungjan Jul 26 '13 at 15:12
  • Also possible duplicate of [How do I select text nodes with jQuery?](http://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery) – mplungjan Sep 11 '13 at 07:38

2 Answers2

2

Do the replacement in a loop. You can use $& in the replacement to refer to the text that was matched.

var keywords = ['wedding stationery', 'something else', 'other keyword'];
var thePage = $("body");
var theHtml = thePage.html();
for (i = 0; i < keywords.length; i++) {
    theHtml = theHtml.replace(new RegExp(keywords[i], 'ig'),
                '<a class="discrete" href="http://www.kateguest.com">$&</a>');
}
thePage.html(theHtml);

DEMO

Barmar
  • 741,623
  • 53
  • 500
  • 612
1

I would suggest something like this:

var keywordsArray = ["place", "all", "of the", "keywords in here like this"];
var thePage = $("body");

for (var i = 0; i < keywordsArray.length; i++) {
    thePage.find(":contains("+keywordsArray[i]+")").each(function(){
        var _this = $(this);
        var content = _this.html();
        content.replace(keywordsArray[i], '<a href="discrete" href="http://whateveryouwant.com/">' + keywordsArray[i] + '</a>');

        _this.html(content);
    });
};
Jonny Sooter
  • 2,417
  • 1
  • 24
  • 40
  • unfortunately this didn't appear to work. Didn't change any of the keywords – Sam Skirrow Jul 25 '13 at 19:29
  • You need to edit the code so that it fits your keywords. If you read it you'll see how. – Jonny Sooter Jul 25 '13 at 19:31
  • apologies, yes I had done that, and still nothing do I need to wrap it in $(document).ready(function() {??? I'm a bit of a newbie with jQuery – Sam Skirrow Jul 25 '13 at 19:35
  • If you don't use a RegExp as the argument to `replace()` it only replaces the first occurrence, not all of them. You need to use an RE to get a global replace. – Barmar Jul 25 '13 at 19:40