javascript - Javascript:在<br>之前和之后的内容中添加元素

我一直在搜索几天，但似乎找不到在<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内的文本中添加标签。

最佳答案

您可以将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/

关于javascript - Javascript:在<br>之前和之后的内容中添加元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30541075/