如何替换js中的html标签？答案

【问题标题】：How to replace a html tag in js?如何替换js中的html标签？
【发布时间】：2017-12-16 18:09:34
【问题描述】：

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

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

在某些情况下像这样

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

我想用

替换 2 个标签

所以它看起来像这样

     <p>DATA ENTRY</p>

我试过了，谁能给我建议。谢谢。

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

【问题讨论】：

<font> 是一个已弃用的标签。您有需要使用它的理由吗？您可以改为使用相同的 <p> 标记，稍后删除该类。
嗨 Nikhil，我正在从客户端获取我无法操作的数据。
不要在 HTML 中使用正则表达式。而是将其转换为临时 DOM 元素，对其进行操作，然后在需要时转换回文本。
@Nicer 从客户端获取这些数据意味着什么？你必须在服务器端（nodejs中的javascript）或客户端（浏览器中的javascript）进行转换？
@Nicer angular & javascript 您正在使用的是客户端。你的意思是你不能触摸 HTML 吗？

标签： javascript html angularjs node.js replace

【解决方案1】：

试试这样：

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

在 javascript 中，您可以执行以下操作：

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

【讨论】：

OP 正在使用 Angular js。所以，我认为使用 jquery 可能不是一个好的选择。

【解决方案2】：

由于您只需要替换字符串，因此只需一个替换语句即可。

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

【讨论】：

【解决方案3】：

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

block 是任何 HTML 块它刚刚离开以正确选择它：

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

【讨论】：

没想到outerHTML 是可写的。很高兴知道它是。谢谢:-)

【解决方案4】：

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

获取要替换的标签数组。

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

遍历循环并用新的 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>');
}

注意：这未经测试，但应该可以工作。

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

如果你使用带有replaceWith的jQuery

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

【讨论】：

OP 正在使用 Angular js。所以，我认为使用 jquery 可能不是一个好的选择。