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

Challenges with the height of the calendar component in Vuetify

Save to a JSON file

The problem with THREE JS OcclusionComposer: encountering "Cannot read properties of undefined (reading 'x')" error

The dimensions of the div are fixed and contains some text

Implementing a rate limit on the login API that is specific to individual IP addresses rather than being

What is the best way to retrieve a variable within an AngularJS controller?

Is there a way to retrieve all div elements within a specific div using webdriver and selenium?

Ways to retrieve the specified data in Javascript in string format

Adjust the flexslider to transition to a new slide when hovering over the thumbnails

Eliminating pins from Biostall Google Maps plugin in CodeIgniter

When using jquery.hide() and show(), the content within the div disappears momentarily before reappearing

Utilizing Shadow Root and Native Web Components for Seamless In-Page Linking

Adjustable height within embedded object tag

What is the best way to showcase a set of paired arrays as key-value pairs?

What is the best way to eliminate the excess space below the footer on a vuejs page?

The operation to remove the child element could not be completed

Want to know how to get images to show up when sharing a link on Twitter?

Troubles arising from JavaScript functions within vue-router

What is the process for generating Json using information from a form?

What is the best way to update or change a value in a JSON file?