如何在JavaScript中替换HTML标签？

Question

我有一个字符串，其中连续出现了一个字体标签。

 <font color="blue">DATA ENTRY</font> 

有些情况下会出现这样的情况

 <font class="beat">DATA ENTRY</font> 

我想要用

标签替换这2个标签。

这样它看起来是这样的。

     <p>DATA ENTRY</p>

我尝试了这个，有人可以帮我提供建议吗？谢谢。

 text = text.replace('<font [^"]*>',<p>).replace('</font>','');

- Nicer

---

<font> 是一个已经被弃用的标签。你是否有必要使用它？你可以使用相同的 <p> 标签，稍后再删除类。 - Nikhil Nanjappa

嗨，Nikhil，我正在从客户端获取这些数据，但我无法操纵它们。 - Nicer

不要在 HTML 中使用正则表达式。相反，将其转换为一个临时的 DOM 元素，进行操作，如果需要，再将其转换回文本。 - evolutionxbox

@Nicer 从客户端获取这些数据意味着什么？你必须在服务器端（Node.js中的JavaScript）或客户端（浏览器中的JavaScript）进行转换吗？ - Koushik Chatterjee

你正在使用更好的Angular和JavaScript作为客户端。你的意思是说你无法接触HTML吗？ - Nikhil Nanjappa

Answer 1

block.outerHTML = "<p>" + block.innerHTML + "</p>" 

其中的块是任何HTML块，只需使用以下代码正确选择它：

var block = document.querySelector(".selector");

- Anton_L

---

没有考虑到outerHTML是可写的，知道这一点很好。谢谢 :-) - alex3683

Answer 2

如果您想坚持使用简单的字符串操作，您需要使用正则表达式，并在replace调用中正确替换：

text = text.replace(/<font[^>]*>/g,'<p>').replace(/<\/font>/g,'</p>');

- alex3683

Answer 3

只需要替换字符串，你可以只使用一个替换语句。

text = text.replace(/<(\/*)font[^>]*>/g, '<$1p>');

- aCa

Answer 4

如果你正在使用jQuery和replaceWith。

$('font').replaceWith('<p>DATA ENTRY</p>');

- Ha Huu Tin

---

OP正在使用Angular js。因此，我认为使用jQuery可能不是一个好选择。 - Hema Nandagopal

Answer 5

首先，font标签已经被弃用，不应该再使用。

1. 获取要替换的标签数组。

   var elems = document.getElementsByTagName('font');
   

2. 循环遍历并用新的 HTML 替换旧的 HTML。

   for (var i = 0; i < elems.length; i++)
   {
       var target = elems[i].innerHTML;
       elems[i].innerHTML = target.replace(/(<p)/igm, '<font').replace(/<\/p>/igm, '</font>');
   }
   

注意：这个代码没有经过测试，但应该可以工作。

- Lars Peterson

Answer 6

试试这样：

$('font').contents().unwrap().wrap('<p/>');

在Javascript中，你可以像这样做：

var str="<font>hello world</font>";   
str = str.replace(/<font>/, "<p>");  
str = str.replace(/<\/font>/,"</p>"); 

- Gyan

---

OP正在使用AngularJS，因此我认为使用jQuery可能不是一个好的选择。 - Hema Nandagopal