31:[] 2f:{"title":"innerText vs. textContent","cells":[{"id":0,"value":"md`# innerText vs. textContent`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"md`I'm doing some highlighting of matched words within HTML. My process is to extract the text from the HTML using \\`element.textContent\\` and get the index for the match using [Diff Match Patch](https://github.com/google/diff-match-patch). I then loop through the text nodes in the HTML until I reach the match index and replace the word with a span element containing the word.\n\nThe process was mainly working but I was having an issue with a paragraph with
tags in it where the highlights were off by one character. Eventually I figured out this was because I was matching against text extracted using \\`element.innerText\\` which tries to preserve some of the formatting and does not completely match the contents of the text nodes. I switched to \\`element.textContent\\` and all is well.\n\nBelow is an example of what comes back from \\`innerText\\`, \\`textContent\\` and the text nodes.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"md`## Example`","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"md`### Original HTML paragraph`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"content = html`

You could start it at the three minute mark but you should watch the whole thing for two reasons:
1. “While My Guitar Gently Weeps” is a great song and watching Tom Petty and Jeff Lynne sing it with George’s son is nice.
2. It draws into sharp relief the fact that a TRUE GOD is entering your life at the 3:24 mark and doesn’t leave it until the video ends.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"md`### innerText`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"innerText_example = html`

${innerText}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"md`Here is innerText with the newline characters replaced by the return symblol (⏎) so you can see where my count was being thrown off:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"innerText_visible_return_example = html`

${innerText.replace('\\n','⏎')}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"md`### textContent`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"textContent_example = html`

${textContent}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"md`### Text nodes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"text_nodes_example = html`

${text_nodes.map(node => node.data).join('')}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"innerText = content.innerText","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"textContent = content.textContent","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"text_nodes = getTextNodes(content)","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"function getTextNodes(el) {\n let n\n let a = []\n let walk = document.createTreeWalker(el, window.NodeFilter.SHOW_TEXT, null, false)\n while ((n = walk.nextNode())) a.push(n)\n return a\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}