Using CSS or Javascript, you can eliminate the (textnode) from Github Gist lists

Question

Using CSS or Javascript, you can eliminate the (textnode) from Github Gist lists

My goal is to extract the username and / values from a series of gists on Github Gists. The challenge lies in the fact that there are no identifiable classes or IDs for the / value.

https://i.stack.imgur.com/9d0kl.png

Below is the HTML snippet with a link to the Github Gists page and JSFiddle:

<div class="d-inline-block">
    <span>
        <a data-hovercard-type="user" data-hovercard-url="/hovercards?user_id=167012" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self"
            href="/hanachin">hanachin</a>
        /
        <a href="/hanachin/2060751fca3444922386879ac666541e">
            <strong class="css-truncate-target">file0.txt</strong>
        </a>
    </span>
    <div class="text-gray" style="font-size:11px;">
        Last active
        <time-ago datetime="2019-03-08T08:24:35Z">Mar 8, 2019</time-ago>
    </div>
    <span class="f6 text-gray">
        Ruby 2.7 ref:
        <a href="https://qiita.com/hanachin_/items/1aa1ba38a87dee91aed6" rel="nofollow">https://qiita.com/hanachin_/items/1aa1ba38a87dee91aed6</a>

    </span>
</div>

View List of GitHub Gists

See DEMO on JSFiddle

I have managed to remove the icon and username using the following code:

[data-hovercard-type="user"] {
display:none;
}

[data-hovercard-type="user"] img {
display:none;
}

However, I am facing difficulty in accessing the / as it does not have any assigned classes and seems to be part of a node/#textnode. How can I extract this information?

javascript html css custom-data-attribute

Answer 1

Answer №1

There doesn't seem to be a CSS selector specifically for targeting text nodes, but one workaround is to hide the forward slash / by setting its font size to 0px.

This CSS solution may not be optimal since it relies on the current dom structure:

.gist-snippet-meta .d-inline-block > span:first-of-type {
    font-size: 0px;
}

.gist-snippet-meta .d-inline-block > span:first-of-type > a:last-of-type {
    /* Restore the font size back to its original value */
    font-size: 14px;
}

Alternatively, you could use JavaScript. One caveat is that you'll need to wait for the DOM to fully load before applying any changes.

It's also important to note that this approach assumes the file name is always the last anchor element in the parent container, unless you utilize Regular Expressions to extract the gist URL (which might impact performance) or have prior knowledge of the username.

For instance, assuming the username remains constant:

Array.from(document.querySelector('[data-hovercard-type="user"]')).forEach( e => {
    var parent = e.parentElement;
    parent.innerHTML = parent.querySelector('a[href*="hanachin/"]').outerHTML;
});

Answer 2

There doesn't seem to be a CSS selector specifically for targeting text nodes, but one workaround is to hide the forward slash / by setting its font size to 0px.

This CSS solution may not be optimal since it relies on the current dom structure:

.gist-snippet-meta .d-inline-block > span:first-of-type {
    font-size: 0px;
}

.gist-snippet-meta .d-inline-block > span:first-of-type > a:last-of-type {
    /* Restore the font size back to its original value */
    font-size: 14px;
}

Alternatively, you could use JavaScript. One caveat is that you'll need to wait for the DOM to fully load before applying any changes.

It's also important to note that this approach assumes the file name is always the last anchor element in the parent container, unless you utilize Regular Expressions to extract the gist URL (which might impact performance) or have prior knowledge of the username.

For instance, assuming the username remains constant:

Array.from(document.querySelector('[data-hovercard-type="user"]')).forEach( e => {
    var parent = e.parentElement;
    parent.innerHTML = parent.querySelector('a[href*="hanachin/"]').outerHTML;
});

Using CSS or Javascript, you can eliminate the (textnode) from Github Gist lists

Answer №1

Similar questions

Determining age in a Class upon instance creation

Yarn combined with Webpack fails to execute post-compilation tasks

Is it possible for AJAX JSON response to return both accurate and undefined values sporadically?

When using jQuery and AJAX, the functions each, if, post, and .html work properly but occasionally erase data inexplicably

What is the best way to send data to PHP while moving objects between different div elements?

The svg image could not be loaded from an external URL due to a Content Security Policy directive violation stating: "default-src 'none'"

What are some ways we can enhance Map.get for react-router using ES6 Maps?

determine function output based on input type

Combining Vue.js for handling both enter key and blur events simultaneously

Ensure that both textarea and pre elements have equal dimensions and line wrapping behavior in Internet Explorer

Node Pagination and Filtering feature malfunctioning

Can you explain the significance of this async JavaScript server application error?

`Trigger a page reload when redirecting`

Navigating to the parent Vue component in a Vue3 project with Composition API structure in WebStorm

Switching Text in ReactJS from V to X: A Tutorial

Issue with displaying MP4 movies in Angular

Conceal elements that are overflowing slightly

Revamp your JavaScript code to trigger when the clock strikes bold!

Trigger a function when clicking outside the element, similar to how a Bootstrap modal is closed

Convert a relative path to an absolute path using the file:// protocol