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

Question

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.

Answer 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>