Javascript:在 在<br>之后

Javascript: Add element to content before &nbsp; and after <br>

本文关键字：之后 br nbsp Javascript      更新时间：2023-09-26

我已经搜索了几天，但我似乎没有找到一种方法来添加标签到<div>内的文本。在&nbsp;之前和<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内的文本。

您可以使用RegExp与String.replace()一起完成这项工作。

function formatContent(content) {
    var ids = [
        "firstname",
        "lastname",
        "street",
        "zipcode",
        "state",
        "city",
        "country"
    ];
    var i = 0;
    function _format (match, nbsp, br) {
        return "<a id='"" + ids[i++] + "'">" + (br || match) + "</a>" + (br && "<br>" || "");
    }
    return content.replace(/(['w's]+&nbsp;)|(['w's]+)<br>|(['w's]+)/g, _format);
}
$(function() {
     $('#my_div').html(formatContent($('#my_div').html()));
});

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

尝试创建id为ids的数组;使用.split()和RegExp参数&nbsp;|<br>创建文本text数组;.map()迭代数组text;.replace()从ids添加id，将<br>, &nbsp;添加回el的文本，返回数组res包含的文本为html;在#my_div上调用.html()，参数为res

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>
*/
<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>

相关文章：