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

I have a text into a <span> tag. I want wrap part of that text into another element tag with an ID which is not in the base HTML code. Since I cannot modify the base HTML code, I'm forced to use JavaScript/JQuery to do so.

我有一个文本到标签。我想将文本的一部分封装到另一个元素标记中，该标记的ID不在基HTML代码中。因为我不能修改基本的HTML代码，所以我不得不使用JavaScript/JQuery来修改。

I have this HTML code:

我有这个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>

I want to add an <a> tag with ID to the texts within that span. The text I want to wrap is dynamic so I cannot use the value inside as such to search for it and target it. The HMTL code should look as shown below after the JavaScript/JQuery code is applied:

我想在这个范围内的文本中添加一个带有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>

Sounds simple but I haven't been able to achieve it.

听起来很简单，但我还没做到。

I will need to target those newly added IDs for something else later on.

稍后我需要将这些新添加的id作为其他目标。

I appreciate your replies.

感谢你的回复。

3 个解决方案

#1

Use jquery's .contents() to get the contents of your <span>. Then filter to only text nodes (nodeType of 3). Then loop through each, and wrap it with an <a> tag if it is not empty. (If you don't perform the trim and empty check, you'll end up with <a> tags for any newline characters inside your span).

使用jquery .contents()来获取的内容。然后只对文本节点(nodeType 3)进行筛选，然后对每个节点进行循环，如果不是空的，则使用标记进行包装。(如果您不执行修剪和空检查，那么您的span内的任何换行字符都将得到标记)。

See the working example below.

请参见下面的工作示例。

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

#2

Have another <span> element with a know ID around your text by default.

默认情况下，在文本周围有另一个带有已知ID的元素。

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

Now change the element type dynamically

现在动态地更改元素类型

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

You can change an index suffix in the id within a loop if you have a series of inputs like this.

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

#3

Try using .map() , Array.prototype.forEach() , .html() , .replace()

尝试使用.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>

#1