Question

我一直在寻找几天，但我似乎找不到在<div>内为文字添加标签的方法。应在 之前以及<br>之前和之后的文本中添加新的单独标记。

原始HTML代码看起来像这样：

<div id="my_div">
John Mike&nbsp;Smith Taylor<br>
Test Street 123<br>
00000&nbsp;FL&nbsp;Miami<br>
US
</div>

应用Javascript / JQuery之后，它应该是这样的：

<div id="my_new">
<a id="firstname">John Mike&nbsp;</a><a id="lastname">Smith Taylor</a><br> 
<a id="street">Test Street 123</a><br>
<a id="zipcode">00000&nbsp;</a><a id="state">FL&nbsp;</a>
<a id="city">Miami</a><br>
<a id="country">US</a>
</div>

我已尝试appendChild到my_div，但它会在文本后打开并关闭标记，而不是将标记添加到div内的文本中。

Answer 1

您可以使用 RegExp 和/home/user/.local/lib/python3.4/site-packages来完成这项工作。

String.replace()

见JsFiddle：https://jsfiddle.net/ssvv7wrL/1/

Answer 2

尝试创建id＆＃39; s ids的数组;利用.split()与RegExp参数 |<br>创建文本数组text; .map()迭代数组text; .replace()要从id添加ids，将<br>， 添加回el文本，将包含文本的数组res返回html;使用参数.html()在#my_div上致电res

＆＃13;

var ids = ["firstname"
          , "lastname"
          , "street"
          , "zipcode"
          , "state"
          , "city"
          , "country"];

var text = $("#my_div").html().split(/&nbsp;|<br>/).filter(Boolean);
var res = text.map(function(el, i) {
  return el.replace(/(\w+.*)/
         , "<a id=" + ids[i] + ">$1</a>" 
         + (i === 1 || i === 2 || i === 5 ? "<br>" : " "));
});

$("#my_div").html(res);

console.log($("#my_div").html());

/*
<a id="firstname">John Mike&nbsp;</a><a id="lastname">Smith Taylor</a><br> 
<a id="street">Test Street 123</a><br>
<a id="zipcode">00000&nbsp;</a><a id="state">FL&nbsp;</a>
<a id="city">Miami</a><br>
<a id="country">US</a>
*/

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="my_div">
  John Mike&nbsp;Smith Taylor
  <br>Test Street 123
  <br>00000&nbsp;FL&nbsp;Miami
  <br>US
</div>

＆＃13;

Javascript：在

2 个答案: