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

我们使用XML feed来显示一些数据，我们使用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（），例如，它将返回此数据：

 <p><em>This</em> is a <strong>test</strong> job <span style="text-decoration: underline;">description</span>.</p>

然后，我们将其缩减为仅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 = `<p><strong>This</strong> is <em>the</em> job <span style="text-decoration: underline;">description</span>. </p>`

    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>