Merge pull request #10 from Hackdoor-io/feat/anchors-without-regex

feat(anchors): avoid regex to parse html

package.json

@@ -122,5 +122,8 @@
   },
   "resolutions": {
     "handlebars": "4.5.0"
+  },
+  "dependencies": {
+    "node-html-parser": "^1.2.16"
   }
 }

src/anchors/index.test.ts

@@ -33,3 +33,29 @@ test('Testing anchors with nested html tags', () => {
     <h2><a id="lorem-ipsum-dolor-sit-amet" href="#lorem-ipsum-dolor-sit-amet" class="h-anchor">#</a><i>Lorem Ipsum Dolor Sit Amet</i></h2>
   `)
 })
+
+test('Testing html with no headings', () => {
+  const replaceAnchors = anchors()
+  const HTMLInput = `
+    <strong>Testing html with no headings</strong>
+    <p>Lorem Ipsum Dolor Sit Amet lorem ipsum</p>
+    <p><i>Lorem Ipsum Dolor Sit Amet</i></p>
+  `
+
+  expect(replaceAnchors(HTMLInput)).toBe(`
+    <strong>Testing html with no headings</strong>
+    <p>Lorem Ipsum Dolor Sit Amet lorem ipsum</p>
+    <p><i>Lorem Ipsum Dolor Sit Amet</i></p>
+  `)
+})
+
+test('Testing simple string', () => {
+  const replaceAnchors = anchors()
+  const HTMLInput = `
+    this is a simple string with no html tags
+  `
+
+  expect(replaceAnchors(HTMLInput)).toBe(`
+    this is a simple string with no html tags
+  `)
+})

src/anchors/index.ts

@@ -1,10 +1,4 @@
-/**
- * @function headingRegex
- * @description Match text inside heading tags
- * @returns {RegExp}
- */
-const headingRegex = (): RegExp =>
-  new RegExp('(?<=(?!h(|1|2|3|4|5|6))>)(.+?)(?=</+?(?=h(|1|2|3|4|5|6)))', 'ig')
+import { parse, HTMLElement } from 'node-html-parser'
 
 /**
  * @function slugify
@@ -34,13 +28,29 @@ const slugify = (text: string): string =>
 const createAnchor = (slug: string): string =>
   `<a id="${slug}" href="#${slug}" class="h-anchor">#</a>`
 
+/**
+ * @function prependAnchors
+ * @param {String} html
+ * @returns {String}
+ */
+const prependAnchors = (html: string): string => {
+  const root = parse(html) as HTMLElement
+
+  const headings = root.querySelectorAll('h1,h2,h3,h4,h5,h6')
+
+  headings.forEach(el => {
+    el.set_content(`${createAnchor(slugify(el.rawText))}${el.innerHTML}`)
+  })
+
+  return root.toString()
+}
+
 /**
  * @function anchors
  * @description returns a function which takes an HTML string as input,
  *              then prepend `<a href="#my-anchor-name">#</a>` before any
  *              heading element such as h1, h2, h3, h4, h5 or h6.
  */
-export default () => (HTMLInput: string): string =>
-  ('' + HTMLInput).replace(headingRegex(), heading => {
-    return createAnchor(slugify(heading)) + heading
-  })
+export default () => (HTMLInput: string): string => {
+  return prependAnchors(HTMLInput)
+}

yarn.lock

@@ -4161,6 +4161,11 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+[email protected]:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
+  integrity sha1-k0EP0hsAlzUVH4howvJx80J+I/0=
+
 highlight.js@^9.0.0:
   version "9.18.1"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.18.1.tgz#ed21aa001fe6252bb10a3d76d47573c6539fe13c"
@@ -6478,6 +6483,13 @@ node-gyp@^5.0.2, node-gyp@^5.1.0:
     tar "^4.4.12"
     which "^1.3.1"
 
+node-html-parser@^1.2.16:
+  version "1.2.16"
+  resolved "https://registry.yarnpkg.com/node-html-parser/-/node-html-parser-1.2.16.tgz#009ffb38915a8aed01693bec2e39933aeb7f6aba"
+  integrity sha512-TrLpGov7J9hBdWWREudBreragmRPq2Q5b19Ly66XoZVUZbb8JXkIqHkPbTHKicuVC8jNnkP4bRnNVik4mkPahw==
+  dependencies:
+    he "1.1.1"
+
 node-int64@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"