Question

我的网页上有一些非静态内容，我需要将所有未打开的纯文本包含在带有类的锚元素中，但是，我需要保留该文本的位置。

我在这个网站上搜索并发现these之类的问题，这些问题提出了同样的问题，除了文本总是在开头或结尾，答案总是在内容之前/后面添加回{ {1}}。

为了使问题更加复杂，有些情况下内容将只打开纯文本，我也需要将其包装起来。

我的HTML：

<div>

有时：

<div>
  <a>1</a>
  <a>2</a>
  3
  <a>4</a>
</div>

我已在this页面上尝试了所有答案，但他们都对文本进行了重新排序。

有什么想法吗？

Answer 1

迭代元素的所有文本节点：

$('div').contents().filter(function() {
    return this.nodeType === 3;
}).wrap('<a class="awesomeClass"></a>');

DEMO

.contents()检索元素的所有子节点，而不仅仅是元素节点。

.filter回调会丢弃所有非文本节点的节点。它的工作原理如下：
每个DOM节点都有属性nodeType，指定其类型（令人惊讶）。该值是常量。元素节点的值为1，文本节点的值为3。 .filter将删除回调返回false的集合中的所有元素。

然后将每个文本节点包装在一个新元素中。

我遇到了空白问题。

如果您的HTML看起来像

<div>
  1
</div>

然后该元素有一个子节点，一个文本节点。文本节点的值不仅包括可见字符，还包括所有空格字符，例如：开头标记后面的换行符。在这里它们可见（⋅是空格，¬是换行符）：

<div>¬
⋅⋅1¬
</div>

因此，文本节点的值为¬⋅⋅1¬。

解决这个问题的方法是修剪节点值，删除尾随和前面的空白字符：

$('div').contents().filter(function() {
    return this.nodeType === 3;
}).each(function() {
    this.nodeValue = $.trim(this.nodeValue);
}).wrap('<a class="awesomeClass"></a>');

DEMO

JavaScript包装解包的纯文本

1 个答案: