Question

我们使用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（）将返回此例如：

 &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);

Answer 1

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

＆＃13;

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);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="text"></div>

＆＃13;

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

＆＃13;

var str = $("#html").html();

//Thanks: https://css-tricks.com/snippets/javascript/strip-html-tags-in-javascript/
$(function() {
      $("#result").append(str.replace(/(<([^>]+)>)/ig, ""));
 });

＆＃13;

<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>

＆＃13;

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

1 个答案: