How to create internal anchor links that work when copying HTML content to Word or Google Docs?

Other Questions Google docs
1

I have a situation where I need to deliver documents in Word and Google Docs format for my client. I built a JavaScript tool that creates HTML pages with formatted content and navigation menus using anchor links.

The problem happens when I copy the HTML content from my browser and paste it into these word processors. Most of the formatting transfers perfectly, but the internal navigation links get messed up. Instead of staying as simple anchor references, they become full URLs pointing to my local development server.

Here’s what my navigation structure looks like:

<div class="navigation">
  <ol>
    <li><a href="#part1">First Part</a></li>
    <li><a href="#part2">Second Part</a></li>
  </ol>
</div>

When I copy this from my browser at localhost:3000/document.html and paste it into Google Docs or Word, the links change from #part1 to http://localhost:3000/document.html#part1. This makes them useless since they point to my local machine instead of working as internal document links.

Is there any technique or HTML attribute that can make these anchor links paste correctly as internal references? I tried opening the HTML file directly in Word but that didn’t help either.

2

This happens because browsers turn relative URLs into absolute ones when you copy-paste HTML. They automatically convert fragment identifiers based on your current page location. I’ve fixed this two ways: First, I replace all anchor links with placeholder text before copying - keeps the visual structure but stops URL resolution. After pasting into Word or Google Docs, I just find-and-replace the placeholders back to internal references. Second approach - use JavaScript to intercept the copy event and strip domains from clipboard data. This keeps anchor functionality working while making sure links stay document-relative instead of pointing to your dev server.

3

I encountered the same issue while preparing documents. Both Word and Google Docs alter anchor links by transforming them into full URLs upon copying, which disrupts internal navigation. I found a workaround by temporarily editing the HTML: I removed the href attributes and replaced them with data attributes before copying. This way, the internal structure remains intact during the paste. For a more reliable solution, I transitioned to generating documents directly in the desired formats using pandoc, ensuring that anchor links remain functional across all platforms.

4

yeah, this is a really annoying Word limitation. what fixed it for me: open the HTML file directly (file://) instead of using localhost - it handles URL conversion way better. also try saving as .mht first, then opening in Word. it keeps anchor links intact better than copy-pasting.