diff --git a/aio/src/app/shared/toc.service.ts b/aio/src/app/shared/toc.service.ts
index 5a6acd8856..2f40189684 100644
--- a/aio/src/app/shared/toc.service.ts
+++ b/aio/src/app/shared/toc.service.ts
@@ -1,7 +1,7 @@
 import { Inject, Injectable } from '@angular/core';
 import { DOCUMENT, DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { ReplaySubject } from 'rxjs/ReplaySubject';
 import { ScrollSpyInfo, ScrollSpyService } from 'app/shared/scroll-spy.service';
+import { ReplaySubject } from 'rxjs/ReplaySubject';
 
 
 export interface TocItem {
@@ -18,10 +18,10 @@ export class TocService {
   activeItemIndex = new ReplaySubject<number | null>(1);
   private scrollSpyInfo: ScrollSpyInfo | null;
 
-  constructor(
-      @Inject(DOCUMENT) private document: any,
+  constructor(@Inject(DOCUMENT) private document: any,
               private domSanitizer: DomSanitizer,
-      private scrollSpyService: ScrollSpyService) { }
+              private scrollSpyService: ScrollSpyService) {
+  }
 
   genToc(docElement?: Element, docId = '') {
     this.resetScrollSpyInfo();
@@ -75,7 +75,10 @@ export class TocService {
 
   private isOriginalText(heading: HTMLHeadingElement): boolean {
     if (heading && heading.hasAttribute('translation-origin')) {
-      const prevNode = heading.previousElementSibling;
+      let prevNode = heading.previousElementSibling;
+      if (prevNode && prevNode.tagName === 'AIO-TOC') {
+        prevNode = prevNode.previousElementSibling;
+      }
       if (prevNode && prevNode.hasAttribute('translation-result')) {
         return true;
       }
diff --git a/aio/src/styles/_translator.scss b/aio/src/styles/_translator.scss
index 9ae2083aa2..4fac8babdb 100644
--- a/aio/src/styles/_translator.scss
+++ b/aio/src/styles/_translator.scss
@@ -2,6 +2,10 @@
   display: none;
 }
 
+[translation-result] + aio-toc + [translation-origin=off] {
+  display: none;
+}
+
 [translation-origin=on] {
   border-top: 1px dashed #0273D4;
 }
diff --git a/aio/tools/transforms/remark-package/services/translator.js b/aio/tools/transforms/remark-package/services/translator.js
index 9610e23af8..e552fbc693 100644
--- a/aio/tools/transforms/remark-package/services/translator.js
+++ b/aio/tools/transforms/remark-package/services/translator.js
@@ -1,14 +1,38 @@
+const slugs = require('github-slugger')();
+
 function mark(text) {
-  return text.replace(/<(h\d|header|p|section)(\b[\s\S]*?)>([\s\S]+?)<\/\1>/gi, function ($0, $1, $2, $3) {
-    const suffix = isTranslation($3) ? 'result' : 'origin=off';
-    return `<${$1} translation-${suffix} ${$2}>${$3}</${$1}>`;
-  });
+  text = addTranslationAttributes(text);
+
+  text = addIdsToHn(text);
+
+  return text;
 }
 
 function isTranslation(text) {
   return text && /[\u2E80-\u2EFF\u2F00-\u2FDF\u3000-\u303F\u31C0-\u31EF\u3200-\u32FF\u3300-\u33FF\u3400-\u4DBF\u4DC0-\u4DFF\u4E00-\u9FBF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF]/.test(text);
 }
 
+function addTranslationAttributes(text) {
+  return text.replace(/<(h\d|header|p|section)(\b[\s\S]*?)>([\s\S]+?)<\/\1>/gi, function ($0, $1, $2, $3) {
+    const suffix = isTranslation($3) ? 'result' : 'origin="off"';
+    return `<${$1} translation-${suffix} ${$2}>${$3}</${$1}>`;
+  });
+}
+
+function addIdsToHn(text) {
+  return text.replace(/<(h\d) translation-origin="off" (?!\bid\b=)(.*?)>(.*?)<\/\1>\n<\1 translation-result (.*?)>(.*?)<\/\1>/gi,
+    (_0, _1, _2, _3, _4, _5) => {
+      const id = toId(_3);
+      return `<${_1} translation-origin="off" ${_2}>${_3}</${_1}>\n<${_1} translation-result ${_4} id="${id}">${_5}</${_1}>`;
+    });
+}
+
+function toId(text) {
+  return slugs.slug(text);
+}
+
 module.exports = {
   mark,
+  addTranslationAttributes,
+  addIdsToHn,
 };
diff --git a/aio/tools/transforms/remark-package/services/translator.mocha.js b/aio/tools/transforms/remark-package/services/translator.mocha.js
new file mode 100644
index 0000000000..50c7f99d58
--- /dev/null
+++ b/aio/tools/transforms/remark-package/services/translator.mocha.js
@@ -0,0 +1,18 @@
+const { expect } = require('chai');
+
+const { mark, addTranslationAttributes, addIdsToHn } = require('./translator');
+
+describe('translator', () => {
+  it('mark translation results and origins', () => {
+    expect(addTranslationAttributes(`<h2 class="no-toc" id="one-or-two">One or two</h2>
+<h2 class="no-toc" id="一或二">一或二</h2>`))
+      .eql(`<h2 translation-origin="off"  class="no-toc" id="one-or-two">One or two</h2>
+<h2 translation-result  class="no-toc" id="一或二">一或二</h2>`);
+  });
+
+  it('should add ids for translation', function () {
+    expect(addIdsToHn(`<h2 translation-origin="off"  class="no-toc">One or two</h2>
+<h2 translation-result  class="no-toc">一或二</h2>`)).eql(`<h2 translation-origin="off"  class="no-toc">One or two</h2>
+<h2 translation-result  class="no-toc" id="one-or-two">一或二</h2>`);
+  });
+});
diff --git a/aio/tools/transforms/remark-package/services/translator.spec.js b/aio/tools/transforms/remark-package/services/translator.spec.js
deleted file mode 100644
index 74ae180116..0000000000
--- a/aio/tools/transforms/remark-package/services/translator.spec.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const { expect } = require('chai');
-
-const { mark } = require('./translator');
-
-describe('translator', () => {
-  it('mark translation results and origins', () => {
-    expect(mark('<h1>AngularJS to Angular</h1>\n<h1>从 AngularJS 到 Angular 快速参考</h1>'))
-      .toEqual('<h1 translation-origin=off >AngularJS to Angular</h1>\n<h1 translation-result >从 AngularJS 到 Angular 快速参考</h1>');
-  });
-});