如何将 p 中的单词包装在 a 标签中答案

【问题标题】：How can i wrap a word from a p in an a tag如何将 p 中的单词包装在 a 标签中
【发布时间】：2016-04-10 12:27:52
【问题描述】：

我有一个p tag，我想在a tag 中包含一个单词

Lorem ipsum @dolor sit amet, consectetur to
Lorem ipsum @dolor sat amet, consectetur

我试过了：

objectP = document.getElementsByTagName('p');
$.each(objectP, function(i, val){

    arrayWords = val.innerHTML.split(" ")

    $.each(arrayWords, function(i, val){

        if(val[0] === '@'){

            val.wrap("<a></a>")

        }

    })

})

【问题讨论】：

您想将所有以@ 开头的单词都包含在<a> 标签中吗？被替换的锚元素的href 值应该是什么？

标签： javascript html

【解决方案1】：

您可以将正则表达式与捕获组一起使用以使事情变得更简单

objectP = document.getElementsByTagName('p');

$.each(objectP, function(i, val){
    val.innerHTML = val.innerHTML.replace(/(@.*?)\s/g, "<a href='#'>$1</a>");
})

这里(@.*?) 是捕获组，$1 将从整个匹配字符串中获取捕获的字符串。

【讨论】：

此解决方案不适用于 @dolor's 或 @dolor-3 等字符串

【解决方案2】：

既然你正在使用 jQuery，试试这个

$("p").each(function(){
  $(this).replaceWith($(this).html().replace(/(@[^\s]+)/,"<a href='#'>$1</a>"))
})

【讨论】：

【解决方案3】：

良好的老式循环：

  var paragraphs = document.querySelectorAll('p');

  [].map.call(paragraphs, function(p) {
    var htmlArray = p.innerHTML.split(' ');

    htmlArray.map(function(word, i, arr) {
      if(word === '@dolor') {
        var a = '<a href="#">' + word + '</a>';
        arr[i] = a;
      }
    });

    p.innerHTML = htmlArray.join(' ');
  });

【讨论】：