jquery 如何使它保留HTML标签，如果每一行文本是用一个div标签 Package ？

hl0ma9xz 于 5个月前发布在 jQuery

关注(0)|答案(2)|浏览(69)

我正在寻求关于我的代码的帮助。它用div标签 Package 每一行文本。然而，问题是它不考虑HTML标签，如<a> or <span>。我正在努力弄清楚如何修改它以保留文本中的这些HTML标签。任何帮助都将不胜感激，因为我自己无法解决这个问题。

// Wrapping lines
function splitLines(container, opentag, closingtag) {
  let $lines = container.children,
    $top = 0,
    $tmp = "";
  container.innerHTML = container.textContent.replace(/\S+/g, "<n>$&</n>");
  for (let i = 0; i < $lines.length; i++) {
    let $rect = $lines[i].getBoundingClientRect().top;
    if ($top < $rect) $tmp += closingtag + opentag;
    $top = $rect;
    $tmp += $lines[i].textContent + " ";
  }
  container.innerHTML = $tmp += closingtag;
}

splitLines( $(".wrap-lines")[0], '<div class="line-wrap"><div class="line">', "</div></div>" );

/* Button */
let $button = gsap.from(".line", { duration: 0.5, yPercent: 100, stagger: 0.2, clearProps:"all" });
$(".btn-lines").on("click", function() {
  $button.restart();
});

body {
  padding: 5% 10%;
  line-height: 1.2;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
}
h1 {
  font-size: 24px;
}
p {
  font-size: 21px;
}

p span {
  background-color: red;
  color: white;
}

.line-wrap {
  display: inline-flex;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>

<div class="container">
  
  <!-- With wrapping lines -->
  <h1>With wrapping lines (HTML tags don't work)</h1>
  <p class="wrap-lines">Lorem ipsum dolor sit, amet <a href="">consectetur</a> adipisicing elit. Animi dolorem quasi aut dolore porro <span>iusto in facilis</span>, molestias nostrum possimus ipsum laboriosam dolorum voluptatibus praesentium consequuntur! Culpa quas nisi hic.</p>
  
  <button class="btn-lines">Animate Lines</button>
  
  <br>
  <br>

  <!-- Without wrapping lines -->
  <h1>Without wrapping lines (HTML tags work)</h1>
  <p>Lorem ipsum dolor sit, amet <a href="">consectetur</a> adipisicing elit. Animi dolorem quasi aut dolore porro <span>iusto in facilis</span>, molestias nostrum possimus ipsum laboriosam dolorum voluptatibus praesentium consequuntur! Culpa quas nisi hic.</p>

</div>

jquery

来源：https://stackoverflow.com/questions/77633142/how-to-make-it-preserve-html-tags-if-each-line-of-text-is-wrapped-with-a-div-tag

2条答案

按热度按时间

xbp102n01#

您面临的问题源于这样一个事实，即当您用HTML标记替换文本内容时，它会丢失现有的HTML结构。
更新（5.58pm IST）

function wrapLines(container, opentag, closingtag) {
  const lines = container.innerHTML.split('\n');

  const wrappedLines = lines.map(line => {
    if (line.trim() !== "") {
      return opentag + line + closingtag;
    }
    return line; 
  });

  container.innerHTML = wrappedLines.join('');
}

wrapLines($(".wrap-lines")[0], '<div class="line-wrap"><div class="line">', "</div></div>");

/* Button */
let $button = gsap.from(".line", { duration: 0.5, yPercent: 100, stagger: 0.2, clearProps:"all" });
$(".btn-lines").on("click", function() {
  $button.restart();
});

字符串

赞(0）回复(0）举报 5个月前

0qx6xfy62#

使用$lines[i].outerHTML而不是$lines[i].textContent，这样您就可以获得标记的整个HTML，而不仅仅是它的文本。

$(".wrap-lines").each(function () {
  let $lineWrapper = this;
  
  function splitLines(container, opentag, closingtag) {
    let $lines = container.children,
      $top = 0,
      $tmp = "";
    for (let i = 0; i < $lines.length; i++) {
      let $rect = $lines[i].getBoundingClientRect().top;
      if ($top < $rect) $tmp += closingtag + opentag;
      $top = $rect;
      $tmp += $lines[i].outerHTML + " ";
    }
    container.innerHTML = $tmp += closingtag;
  }

  //splitLines( $(this)[0], '<div class="line">', "</div>" );

});

p {
  font-size: 24px;
}
p span {
  background-color: red;
  color: white;
}

.line:hover {
  background-color: #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>Wrapping text lines</h1>

<p class="wrap-lines">Lorem ipsum dolor sit, amet <a href="">consectetur</a> adipisicing elit. Animi dolorem quasi aut dolore <span>porro iusto</span> in facilis, molestias nostrum possimus ipsum laboriosam dolorum voluptatibus praesentium consequuntur! Culpa quas nisi hic.</p>

赞(0）回复(0）举报 5个月前

我来回答

jquery 如何使它保留HTML标签，如果每一行文本是用一个div标签 Package ？

2条答案

相关问题

热门标签

最新问答