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>

我想在该范围内的文本中添加带有ID的<a>标记。我想要包装的文本是动态的，所以我不能使用里面的值来搜索它并将其作为目标。应用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>标记包装它。（如果您不执行修剪和空检查，则最终会为您的范围内的任何换行符添加<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>

Answer 2

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

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

现在动态更改元素类型

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

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

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>

将部分文本包装到新元素标记中

3 个答案: