将javascript中的html转换为HTML标签

Posted 2023-03-07

【中文标题】将javascript中的html转换为HTML标签

【英文标题】：Covert html in javascript to HTML tags

【发布时间】：2022-01-13 12:12:10

【问题描述】：

我正在处理工具提示，我将从后端获取带有 html 标记的数据。我需要在工具提示中显示其相应标签中的相应数据。例如，我会从后端获取 hello user click here。我必须以 h1 格式显示为 hello 用户，单击此处应该是一个锚点。我尝试了这两个功能并替换它不起作用。

带功能：

<h1 id="data">

</h1>
    function convertToPlain(html)
        var tempDivElement = document.createElement("div");
        tempDivElement.innerHTML = html;
        return tempDivElement.textContent || tempDivElement.innerText || "";
    
    var htmlString= "<div><h1>Bears Beets Battlestar Galactica </h1>\n<p>Quote by Dwight Schrute<a> click here<a></p></div>";
    let dataVal = convertToPlain(htmlString)
    document.getElementById("demo").innerHTML = dataVal;

替换：

https://codesandbox.io/s/serene-fast-u8fie?file=/App.svelte

【参考方案1】：

我通过复制粘贴您的代码并在convertToPlain 函数中更新return 语句在sn-p 下方制作，我还在htmlString 内容中将href 属性添加到<a>。

function convertToPlain(html) 
  var tempDivElement = document.createElement("div");
  tempDivElement.innerHTML = html;
  return tempDivElement.innerHTML;

var htmlString = "<div><h1>Bears Beets Battlestar Galactica </h1>\n<p>Quote by Dwight Schrute<a href='#'> click here<a></p></div>";
let dataVal = convertToPlain(htmlString)
document.getElementById("demo").innerHTML = dataVal;

<h1 id="demo"></h1>