将文本的部分包装成新的元素标签

Question

我有一个文本在<span>标签中。我想将其中一部分文本包装到另一个具有ID的元素标签中，而该ID不在基本HTML代码中。 由于我不能修改基本的HTML代码，所以我被迫使用JavaScript/JQuery来完成此操作。

我有以下HTML代码：

<span id="my_span">John<input type="hidden" name="firstname" value="John" id="my_input1">
<br>Smith<input type="hidden" name="lastname" value="Smith" id="my_input2">
</span>

我想在那个中的文本添加带有ID的标签。 我要包装的文本是动态的，所以我不能使用其中的值来搜索和定位它。应用JavaScript/JQuery代码后，HTML代码应如下所示：

<span id="my_span"><a id="added_a_tag1">John</a><input type="hidden" name="firstname" value="John" id="my_input1">
<br>
<a id="added_a_tag2">Smith</a><input type="hidden" name="lastname" value="Smith" id="my_input2">
</span>

听起来很简单，但我一直没有做到。

稍后我将需要针对这些新添加的ID进行其他操作。

感谢您的回复。

- Mike-S122

Answer 1

使用jQuery的.contents()方法获取标签的内容。然后过滤只保留文本节点（nodeType为3）。接着循环遍历每个节点，如果不为空，则用标签包装它。（如果您不进行修剪和空检查，您最终会得到任何在标签内的换行符的标签）。

请参见下面的实际示例。

$(document).ready(function() {
  var count = 0;
  $('#my_span').contents()
    .filter(function() {
      return this.nodeType === 3
    })
    .each(function() {
      if ($.trim($(this).text()).length > 0) {
        $(this).wrap('<a href id="added_a_tag_' + (++count) + '"></a>');
      }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="my_span">
  John<input type="hidden" name="firstname" value="John" id="my_input1">
  <br>
  Smith<input type="hidden" name="lastname" value="Smith" id="my_input2">
</span>

- Andrew Mairose

---

这个完美地运作了。非常感谢你的帮助！ - Mike-S122

Answer 2

默认情况下，您的文本周围有另一个具有已知ID的<span>元素。

<span id="name_1">John</span>

现在动态更改元素类型

var currentText = $("#name_1").innerHTML;
 $("#name_1").replaceWith('<a id="dynamic_1">' + currentText + '</a>');

如果您有一系列像这样的输入，您可以在循环中更改id中的索引后缀。

- Charlie

Answer 3

尝试使用 .map()，Array.prototype.forEach()，.html()，.replace()。

$("#my_span").map(function() {
  // split new line character of `#my_span` `.textContent`
  var txt = this.textContent.split("\n").filter(Boolean);
  // iterate each `txt`
  txt.forEach(function(val, index) {
    $(this).html(function(_, html) {
      // replace `val` with `a` element
      return html.replace(val, $("<a />", {
        "text": txt[index],
        "id": "added_a_tag" + (index + 1),
        "href": "#"
      })[0].outerHTML)
    })
  }.bind(this))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="my_span">John<input type="hidden" name="firstname" value="John" id="my_input1">
<br>Smith<input type="hidden" name="lastname" value="Smith" id="my_input2">
</span>

- guest271314