Swapping out the initial occurrence of every word in the list with a hyperlink

I stumbled upon a fantastic script on a programming forum that almost fits my requirements perfectly. It essentially replaces specific words in a document with links to Wikipedia. However, I have run into an issue where I only want the first occurrence of a word to be linked.

Here is the script (sourced from this particular response):

function replaceInElement(element, find, replace) {
    // logic to handle replacements and child nodes
}
function replaceInText(text, find, replace) {
    // code to replace text content with specified links
}

// defining keywords for matching purposes using regex
var find= /\b(keyword|whatever)\b/gi;

replaceInElement(document.body, find, function(match) {
    // creating wikipedia links based on matched keywords
});

I attempted to tweak the script by utilizing indexOf instead of regular expressions following guidance from another solution (referenced in this answer). The goal was to improve speed efficiency:

var words = ["keyword","whatever"];
var text = "Whatever, keywords are like so, whatever... Unrelated, I now know " +
           "what it's like to be a tweenage girl. Go Edward.";
var matches = []; 

var lowerCaseText = text.toLowerCase();
for (var i=0;i<words.length;i++) { 
    if (lowerCaseText.indexOf(words[i]) != -1) 
        matches.push(words[i]);    
}

My query is how can I merge these two scripts to achieve optimal speed without relying on external libraries?

Answer №1

Check out the modified code snippet below for your desired functionality http://jsfiddle.net/bW7LW/2/

function replaceContent(element, find, replace) {

    var found = {},
        replaceInElement = function(element, find, replace, init) {

            var child, tag, 
                len = element.childNodes.length, 
                i = 0,
                replaceInText = function(text, find, replace) {

                    var len = find.length,
                        index, i = 0;

                    for (; i < len; i++) {

                        index = text.data.indexOf(find[i]);

                        if (index !== -1 && found && !found[find[i]]) {

                            found[find[i]] = true;
                            text.splitText(index);
                            text.nextSibling.splitText(find[i]);
                            text.parentNode.replaceChild(replace(find[i]), text.nextSibling);
                            return;
                        };
                    };
                };

            // iterate over child nodes in reverse, as replacement may increase length of child node list.
            for (; i < len; i++) {

                child = element.childNodes[i];

                if (child.nodeType == 1) { // ELEMENT_NODE
                    tag = child.nodeName.toLowerCase();

                    if (tag != 'style' && tag != 'script') {
                        replaceInElement(child, find, replace);
                    }

                } else if (child.nodeType == 3) { // TEXT_NODE
                    replaceInText(child, find, replace);
                }
            }
        };
    replaceInElement(element, find, replace);
};

// keywords to match. This *must* be a 'g'lobal regexp or it'll fail bad
var find = 'Lorem Ipsum bla'.split(' ');

$(function() {

    // replace matched strings with wiki links
    replaceContent(document.body, find, function(str) {
        var link = document.createElement('a');
        link.href = 'http://en.wikipedia.org/wiki/' + str;
        link.appendChild(document.createTextNode(str));
        return link;
    });
});​

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it safe to utilize an AngularJS filter for parsing a URL?

When working on a web application, my client-side (angularjs based) receives JSON data from a web service. The JSON can contain a text field with some URLs, such as: blah blah ... http://www.example.com blah blah blah ... To render these links as HTML, I ...

String includes another String not refreshing automatically

How come myCtrl.greeting doesn't automatically update when I change myCtrl.name? angular.module('MyApp', []) .controller('MainController', [function(){ var mCtrl = this; mCtrl.name = ''; mCt ...

Choose according to reactjs using react-select

Currently working on a ReactJS app that includes a page with two select elements, where one is dependent on the other. I am integrating react-select and @material-ui. Within the context of dates: [ { "id": 1, "name": "20 ...

Utilize the ng-controller directive with unique aliases across various sections of HTML code

I'm facing an issue with my ng-controllers when multiple controllers are used on the same page. For instance, I have one controller in the page header, another in a different section of the same page, and one in the content of the page. However, all o ...

I am trying to access a value saved in a service in Angular 8 component and use it in other services. Can anyone help

Setting a value through a component export class UniqueComponent { constructor(service:UniqueService){ } count =0 ; onRefresh(){ this.service.count = 1; } } Using the value in the service UniqueService{ count:any; doSomething(){ //using count ...

Why am I encountering a type error in NodeJS when utilizing the ping module?

I'm currently working on creating a simple app for pinging an IP address. The HTML form I've created has one input field for the IP address, which is then sent to NodeJS for processing. I am utilizing the ping module to retrieve the results. Ever ...

A guide on incorporating java.type into your JavaScript code

I've been attempting to utilize the following command in my JavaScript: var file = new Java.type("java.io.File"); Unfortunately, I'm encountering an error: Uncaught ReferenceError: Java is not defined Can anyone provide guidance on how to suc ...

The error encountered is an unhandled rejection with a message stating "TypeError: Cannot access property 'username' of null

My tech stack includes NodeJS, PassportJS, MySQL, and Sequelize (ORM for MySQL). The following code snippet is taken from my Passport.JS file. Whenever a user registers on my website, an error is returned if the username or email is already in use. If both ...

Angular HttpClient request fails to initiate

Overview: A button click on a form triggers the methodForm within the component. methodForm then calls methodService in the service layer. methodService is supposed to make an HTTP POST request. Problem: The HTTP POST request is not being made. However, me ...

Tips for creating an effective dark mode toggle switch on a website

I was experimenting with creating a dark-mode switch for a website, but I'm not convinced that my implementation is the most efficient. Essentially, I ended up duplicating each file and adding a "2" at the end to create modified versions for each sect ...

Encase all jQuery functionalities within a custom class

I am looking to create a JavaScript class that encapsulates jQuery's DOM functions, but I want these functions to only interact with a single property of that class. class Foo { constructor() { this.$wrapper = $('<div>wrapper</div ...

JQuery cannot target content that is dynamically inserted through an Ajax request

When I use an ajax call to pass dynamically generated html, such as in the example below: var loadContent = function(){ $.ajax({ url: '/url', method: 'GET' }).success(function (html) { $('.con ...

react-responsive-carousel: setting a specific height for thumbnail images

After setting a fixed height for the image, I noticed that the same height is also being applied to the thumbnails. How can I avoid this issue? <Carousel width="600px" dynamicHeight={false}> {data?.book?.images.map((image, i) => ( ...

Maintaining a reliable and efficient way to update the userlist in a chatroom using PHP, AJAX, and SQL

I've successfully created a chatroom using PHP, JavaScript, AJAX, and SQL without the use of JQuery or any other tools. I maintain user persistence through session variables to keep users visible on the front page of my website (www.chatbae.com). How ...

Is there a way to make changes to a pre-uploaded PDF document?

I'm looking to include a footer in a PDF file that is currently stored on the server. For instance, I have uploaded a file to uploads/aaa.pdf and now I need to insert a footer into the same file located at uploads/aaa.pdf Does anyone know how I can ...

Discover the method for obtaining a selected element in a bootstrap dropdown that is dynamically populated

Similar to the question asked on Stack Overflow about how to display the selected item in a Bootstrap button dropdown title, the difference here is that the dropdown list is populated through an ajax response. The issue arises when trying to handle click ...

Angular.js - organizing a list of items and preserving the outcome

Here is a compilation of randomly arranged items: <ul class="one" drag-drop="page.items"> <li ng-repeat='item in page.items|orderBy:page.random as result'> <img ng-src="http://placecage.com/{{item.id*100}}/{{item.id*100}}"& ...

The submission of the Ajax form isn't functioning as expected

I have created a feedback form with an image submit button instead of the regular HTML submit button. When I try to submit the form, the "data:" value always returns as NULL. Can you help me identify the issue in my code? Here is the code snippet: The FOR ...

why is my angular listing malfunctioning when I try to compare two fields?

<div ng-controller="SamsungServicesCtrl"> <ion-content> <li class="item item-checkbox" ng-repeat="item in items" > <img src="{{item.icon}}" style="float:left;height:30px;width:30px;padding-right:5px;" & ...

Provide a unique <li> attribute for the JavaScript function to utilize

Is there a way to pass specific attributes from dropdown options to a javascript function? I have tried using .data() and .attr(), but the console keeps showing "undefined". Any suggestions on how to achieve this in a cleaner and simpler way would be gre ...