changing untagged elements within the DOM

Question

I am looking for a way to manipulate untagged elements within the DOM preferably with CSS, if not possible, than with JQuery.

In this example a JS file is populating the HTML but the person did not wrap the separator/pipes in tags.

What are my options here?

I see no reason to have `|` in a tag of its own unless you need to style them. — Andy, Apr 21 '16 at 12:55
They're call text nodes. You can access them via `$myTableRow[0].childNodes`, which you can loop through and find all text nodes using `myNode.nodeType === 3`. - [Selecting text nodes with jQuery isn't easy](http://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery) — evolutionxbox, Apr 21 '16 at 12:55
That might help you : https://api.jquery.com/contents/. I would also try not to use statement such as *"some people code unprofessionally"*, especially when talking about open source project, and on stackoverflow... — Karl-André Gagnon, Apr 21 '16 at 13:00
@Andy I agree, but the OP says in the first line of the question "I am looking for a way to manipulate [...] with CSS. - To do that they need to wrapped. — evolutionxbox, Apr 21 '16 at 13:00
I think I took offence at the remark that any way of structuring an HTML page that conflicts with the OP's vision is "unprofessional". — Andy, Apr 21 '16 at 13:03
@Andy - I saw that. A bit harsh considering OP didn't have to write the code themselves. — evolutionxbox, Apr 21 '16 at 13:05

score 1 · Answer 1 · edited Jul 13 '22 at 13:54

 function tagIt(parent, untagged, tagType, className) {
   var span = document.createElement(tagType);
   parent.insertBefore(span, untagged);
   span.appendChild(untagged);
   span.classList.add(className);
}

 function getUntagged(element) {
   var children = element.childNodes;
   var max = children.length;
   var untagged = [];
   for (i = 0; i < max; i++) {
      if (children[i].nodeType === 3) {
        untagged.push(children[i]);
      }
   }

   return untagged;
 }

 // Working example:

function tagify() {
  var container = document.querySelector('.container');

  var untagged = getUntagged(container);

  untagged.forEach(node => {
       tagIt(container, node, 'span', 'tagged');
  });
}
  
document.querySelector('.tagify').addEventListener('click', tagify);

.tagged {
  color: red;
  font-weight: bold;
  font-size: 2em;
}

<h2>Click the button to tag vertical bars</h2>
<button class="tagify">Tag them</button>
<div class="container">
  <a href="#" class="placeholder">anchor</a>
  |
  <a href="#" class="placeholder">anchor</a>
  |
  <a href="#" class="placeholder">anchor</a>
  |
  </div>

AlphaG33k · Accepted Answer · 2016-04-21T13:54:47.523

To do this correctly you need to find the offending script and add your <span> tags around the |. You could also monkey patch it like this and it will work as well (BUT DONT!):

You could reuse this method I wrote you to replace any char in any element with any character or set of characters/elements/etc.

var targetSelector = '.small';

function wrapChar(targetSelector, char, replaceWith) {
  'use strict';

  var content = $(targetSelector).html();
  content = content.replace(new RegExp(/\|/, "g"), replaceWith);

  return content;

}


$(function() {

  $(targetSelector).html(wrapChar(targetSelector, ['|'], '<span class="pipe">|</span>'));

});

.pipe {
  font-size: 3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="small">
      <a href="#">test 1</a>
      |
      <a href="#">test 2</a>
      |
      <a href="#">test 3</a>
      |
      <a href="#">test 4</a>
    </td>
  </tr>
</table>

http://codepen.io/nicholasabrams/pen/PNBomg?editors=1010

changing untagged elements within the DOM

2 Answers2