'How to obtain URL from a rel=canonical tag using Javascript

I'm using Disqus comments system and I'm trying to use the feature of adding comment count links.

The code that I can use is below:

<span class="disqus-comment-count" data-disqus-url="http://example.com/article1.html">Comments</span>

And this is where I have some issue. The thing is I have several hundreds of pages so editing the data-disqus-url value for each and every html pages will take a very long time and not feasible. Is there maybe some Javascript code that will dynamically input the data-disqus-url value with my canonical url?

I can't use php code since I'm using html files but I have SSI enabled since I need to use includes for easy template management. Also, all my html pages already have a unique meta tag for rel="canonical". I just need perhaps some Javascript codes that will fill-up the data-disqus-url value with the value indicated in my canonical url tag. Is that possible?

UPDATE

So I have exactly this code:

const commentCount = document.querySelectorAll('.disqus-comment-count');
commentCount.forEach(item => {
      item.setAttribute('data-disqus-url', (document.querySelector('[rel=canonical]').getAttribute('href'));
      })
<p><span class="disqus-comment-count" data-disqus-url="">Comments</span></p>

But it doesn't work. Maybe I did it wrong. sorry, I don't understand much about Javascript codes. I'll appreciate it if you can provide complete code.

javascripthtmlcanonical-link


Solution 1:[1]

you can use setAttribute to update the value with your Url.

const commentCount = document.querySelectorAll('.disqus-comment-count');

commentCount.forEach(item => {
  item.setAttribute('data-disqus-url', 'https://google.com');
})
<span class="disqus-comment-count" data-disqus-url="http://example.com/article1.html">Comments</span>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ahsan

Related Questions