jQuery

Jquery reminds me of some very old technology. I did hear about this in some places but never saw any application. So mostly I was staying away from learning it. Recently I found a problem that I could not find any solution using our cool new Framework and technology. Somewhere in internet I found an old school jquery solution. So here let me tell you what this jquery can do and how you can use it in our modern react projects.

The Problem Imagine there is a particular class (lets call this magic-class). Any component that will have this magic class I want to automatically see a # just before it. And that # will be clickable and it will send me to hashedLink of that para.

In simple code language

<div class="magic-class">contentText</div>

// should become

<div class="magic-class">
  <a href="#{contentText}" id="contentText">#<a>
  <span>contentText</span>
</div>

In practical what Im trying to make

In practical Im trying to create a blog where for each para I will have a separately auto generated link. Here is an example from github https://github.com/ayonious/console-table-printer#basic-example

Once you click this link your browser shows you only that part of the page and not the beginning of the page. This is a browser feature how you can control using html tags/href you can read here https://stackoverflow.com/questions/2835140/how-do-i-link-to-part-of-a-page-hash

One Small Restriction, one foot on my face There is a restriction to this problem that makes it difficult: this component is generated by a third party library. So you cant just go in and add those other HTML elements as you wish.

Thinking About solution using React and other components Yes its possible if you have full control on the props based on which this div-magic-class was generated in the first place. So making some changes to the structure was almost impossible. So if you have in this case some other solution place let me know.

What can jquery do

jquery can query your html and do changes there accordingly. This ilterally means some very strong regular expression related library that works on html.

The solution

Now lets talk about solution with jquery. After the dom is rendered you can run some kind of regex to find all those div-s and then replace or add new stuffs accordingly. Here is my solution as code. Enjoy!

import $ from "jquery";
import React, { Component } from "react";

class PostDetails extends Component<any, any> {
  componentDidMount() {
    $("h1").wrapInner(`<span class="temporary_magic"></span>`);

    $(".temporary_magic").each((ind, val) => {
      const hashUrlContent = val.textContent.toLowerCase().split(" ").join("-");
      val.insertAdjacentHTML(
        "beforebegin",
        `<a href="#${hashUrlContent}" id="${hashUrlContent}" class="header-anchor" >#</a`
      );
    });

    $("span").removeClass("temporary_magic");
  }

  render() {
    // blabla
  }
}

export default PostDetails;

And here is a simple css for that

.header-anchor {
  opacity: 0;
}

.header-anchor:hover {
  opacity: 1;
}