javascript - 将部分文本包装到新的元素标签中

Question

我有一段文字变成了<span>标签。我想将该文本的一部分包装到另一个元素标记中，该标记的 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>

我想添加一个 <a>将 ID 标记到该跨度内的文本。我要换行的文本是动态的，所以我不能使用其中的值来搜索它并定位它。在 JavaScript/JQuery 之后，HMTL 代码应如下所示。应用代码:

<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 用于其他用途。

非常感谢您的回复。

Answer 1

使用 jquery 的 .contents()获取您的 <span> 的内容.然后过滤为仅文本节点(nodeType 为 3)。然后遍历每个，并用 <a> 包裹它如果它不为空，则标记。 (如果您不执行 trim 和清空检查，您将以 <a> 标签结束您的范围内的任何换行符)。

请参阅下面的工作示例。

$(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>