更改 DOM 中的未标记元素答案

【问题标题】：changing untagged elements within the DOM更改 DOM 中的未标记元素
【发布时间】：2016-04-21 21:54:47
【问题描述】：

我正在寻找一种在 DOM 中操作未标记元素的方法，如果不可能，最好使用 CSS，而不是使用 JQuery。

在此示例中，一个 JS 文件正在填充 HTML，但此人没有将分隔符/管道包装在标签中。

我有什么选择？

【问题讨论】：

我认为没有理由在自己的标签中包含|，除非您需要对其进行样式设置。
它们被称为文本节点。您可以通过$myTableRow[0].childNodes 访问它们，您可以使用myNode.nodeType === 3 循环并查找所有文本节点。 - Selecting text nodes with jQuery isn't easy
这可能会对您有所帮助：api.jquery.com/contents。我也会尽量不使用诸如“有些人编码不专业”之类的语句，尤其是在谈论开源项目时，以及在stackoverflow上......
@Andy 我同意，但 OP 在问题的第一行中说“我正在寻找一种使用 CSS 操作 [...] 的方法。 - 为此，他们需要包装。
我删除了那段。它没有增加任何问题。

标签： javascript jquery html css

【解决方案1】：

要正确执行此操作，您需要找到有问题的脚本并在| 周围添加您的<span> 标签。你也可以像这样修改它，它也可以工作（但不要！）：

你可以重用我写给你的这个方法，用任何字符或一组字符/元素/等替换任何元素中的任何字符。

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

【讨论】：

【解决方案2】：

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 i = children.length;
  var untagged = [];
  while (--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>

【讨论】：