将 HTML 转换为文本，然后转换回 HTML 以添加到页面

Converting HTML to text then back to HTML to add to page

本文关键字：转换 HTML 添加 然后 文本      更新时间：2023-09-26

我们使用XML提要来显示一些数据，我们使用jquery和ajax进行调用。一旦我们有了数据，我就会尝试正确解析它。 

var des = $(this).find("Description").text();
var trimmed= des.substring(0, 300);
if (trimmed.length <= 300) {
    trimmed += "...";
}
var $des = $('<div class="linkitem"></div>').html(trimmed);
if (count == 1) {
    var wrapper = "<div class='item active'>";
} else {
    var wrapper = "<div class='item'>";
}
var wrapperEnd = "</div>";
$(".carousel-inner").append($(wrapper).append($link, $location, $category, 
    $emptype, $des, $(wrapperEnd)));

我遇到的问题是"描述"字段。一旦我获得数据，数据最初以 html 形式开始，我以 .text（） 的形式获得它，这将返回以下内容： 

 &lt;p&gt;&lt;em&gt;This&lt;/em&gt; is a &lt;strong&gt;test&lt;/strong&gt; job &lt;span style=&quot;text-decoration: underline;&quot;&gt;description&lt;/span&gt;.&lt;/p&gt;

然后我们将其修剪为只有 300 个字符，我知道这有点风险，因为我们可能会半截掉一个 html 标签，但这就是我们目前正在做的事情。

然后，我需要将此修剪后的描述添加到 html 页面上的div 中。问题是它目前像这样添加： 

<div class="linkitem">&lt;p&gt;&lt;strong&gt;This&lt;/strong&gt; is &lt;em&gt;the&lt;/em&gt; job &lt;span style="text-decoration: underline;"&gt;description&lt;/span&gt;.&amp;nbsp;&lt;/p&gt;...</div>

因此，它似乎没有将其转换回 html 以使页面正确呈现。有人可以告诉我我可能出错的地方吗？

----编辑----
更改尝试： 

var desString = $.parseHTML(trimmed);
var $des = $('<div class="linkitem"></div>').html(desString);
你可以

使用jQuery内置的$.parseHTML函数。

var str = `&lt;p&gt;&lt;strong&gt;This&lt;/strong&gt; is &lt;em&gt;the&lt;/em&gt; job &lt;span style="text-decoration: underline;"&gt;description&lt;/span&gt;.&amp;nbsp;&lt;/p&gt;`
    var html = $("<div />").html(str).text();
    $("#text").append(html);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="text"></div>

您还想尝试删除标签，可以执行一个简单的替换功能：

var str = $("#html").html();
//Thanks: https://css-tricks.com/snippets/javascript/strip-html-tags-in-javascript/
$(function() {
      $("#result").append(str.replace(/(<([^>]+)>)/ig, ""));
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="html" style="display:none">
  <h1>HTML Ipsum Presents</h1>
  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
    placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
    tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
  <h2>Header Level 2</h2>
  <ol>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ol>
  <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
      elit sit amet quam. Vivamus pretium ornare est.</p>
  </blockquote>
  <h3>Header Level 3</h3>
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ul>
  <pre><code>
#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}
</code></pre>
</div>
<div id="result"></div>

相关文章：