Search code examples
javascripthtml

Traversing all nodes in selected range

How can you retrieve all nodes within the selected range in javascript for example if i highlight the following nodes on this stackoverflow post is it possible to create a simple iterator given the base and extent node that walks the DOMTree between the two. enter image description here

I've tried using Range and TreeWalker but haven't come up with anything i only ever get a range count of 1.

Solution

  • You can get a copy of the selected nodes by going through the selected range and clone the contents of the range selection. Collect all cloned nodes in a DocumentFragment object.

    Then create a TreeWalker with the DocumentFragment object that has the collected elements and push each node to a new array.

    The resulting array will be a list of all the nodes in the selection.

    Run the example below and check the console of your browser after selecting text and clicking on the Get selected nodes button.

    const button = document.getElementById('get-nodes');

function getSelectedNodes() {
  const selection = document.getSelection();
  const fragment = document.createDocumentFragment();
  const nodeList = [];

  for (let i = 0; i < selection.rangeCount; i++) {
    fragment.append(selection.getRangeAt(i).cloneContents());
  }

  const walker = document.createTreeWalker(fragment);
 
  while(walker.nextNode()) {
    const currentNode = walker.currentNode;
    nodeList.push(currentNode);
  }

  return nodeList;
}

button.addEventListener('click', () => {
  const nodeList = getSelectedNodes();
  console.log(nodeList);
});
    <button id="get-nodes">Get selected nodes</button>

<div class="s-prose js-post-body" itemprop="text">
  <p style="color: red">I'm running spring cloud dataflow server in a container and was able to configure app logs to a specific folder that is brought outside of the container. However, I can't figure out how to store dataflow server logs themselves in a file.</p>
  <p>According to this:
    <a href="https://docs.spring.io/spring-cloud-dataflow/docs/2.7.2/reference/htmlsingle/#configuration-local-logging" rel="nofollow noreferrer">https://docs.spring.io/spring-cloud-dataflow/docs/2.7.2/reference/htmlsingle/#configuration-local-logging</a></p>
  <p>It should be plain and simple, just set LOG_PATH and that's pretty much it. But that does nothing. And when I look at logback-spring.xml in the jar file, I can see that:</p>
  <pre class="default s-code-block"><code class="hljs language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">root</span> <span class="hljs-attr">level</span>=<span class="hljs-string">"INFO"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">appender-ref</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"STDOUT"</span>/&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">root</span>&gt;</span>
        </code></pre>
  <p>Which in my understanding is the reason why the logs don't go into the file, they just go to the console.</p>
  <p>Is there a way to override the appender-ref attribute in the logback-spring.xml with an environnment variable, or how can I get the dataflow server logs in a file?</p>
</div>