gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-31 08:26:47 25 4
gpt4 key购买 nike

我有一段文字变成了<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 用于其他用途。

非常感谢您的回复。

最佳答案

使用 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>

关于javascript - 将部分文本包装到新的元素标签中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33374810/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com