Javascript获取HTML块中的最后一段文本

Javascript to get the last paragraph text in HTML block

本文关键字：最后 后一段 文本 获取 HTML Javascript      更新时间：2023-09-26

我敢肯定这很简单，但我遇到了一些麻烦。我正在尝试使用 SharePoint 2013 客户端呈现 （CSR） 来格式化包含长文本块的 sharepoint 字段，以仅显示最后一个段落块（这个想法是为报告最后一行条目的任务提供"上次更新状态"）。

因此，以这个 html 块为例：

<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <title></title>
  </head>
  <body>
    <div class="ExternalClass473CC6A801594594826FDFA0BFAD6B1E">
      <p>​</p>
      <p style="margin:0in;font-family:calibri;font-size:14pt;color:#0070c0;">
        <span style="font-weight:bold;text-decoration:underline;">Current Status</span>
        <span style="font-weight:bold;">: Pending</span>
      </p>
      <p style="margin:0in;font-family:calibri;font-size:12pt;">Some update</p>
      <p style="margin:0in;font-family:calibri;font-size:12pt;">Some Update 2</p>
      <p style="margin:0in;font-family:calibri;font-size:12pt;">THIS IS THE TEXT I WANT TO GET
      <br /></p>
      <p>
        <br />
      </p>
    </div>
  </body>
</html>

如何使用正则表达式或 javascript html 解析器来设置变量以包含"这是我想要获取的文本"？

提前感谢！ :)

"最后一个段落块"是指最后一个"p"元素吗？ 如果是这样，为什么不：

<script type="text/javascript">
  window.onload = function() {
    target = document.getElementsByTagName("p")[-1];
    content = target.innerText || target.textContent;
  };
</script>

在jQuery中：

<script type="text/javascript">
  jQuery(document).ready(function() {
    target = $("p").last();
    content = target.html();
  });
</script>

你可以完全放弃使用JS，而是使用CSS来做到这一点。把它贴在你的<head>

. 
<style type="text/css">
p {
  display: none; /* This hides all p tags */
}
p:last-child {
  display: inline; /* This will show the last p tag */
}
</style>

这里有一些时髦的正则表达式魔法

document
// Get the parent node
.querySelector('.ExternalClass473CC6A801594594826FDFA0BFAD6B1E') 
// Get the contents as text
.textContent
// Look for any character, then match all the way until there's a linebreak or its the end of the string. 
.match(/'w.+('n|$)/g)
// Get the last matching item
.slice(-1)

var textYouWantToGet = document.querySelector('p:last-child').innerText

如果你想分配给变量的<p>标签有一个类似id的东西，这样JavaScript就可以识别它，那会很方便。

如果你这样做了，你可以简单地做：var text = document.querySelector("#id").value

或者，如果这不是一个选项，您必须自己在<p>标签中寻找它。

像这样的东西：var pTags = document.getElementByTagName("p"); var theTextIwant = ""; for(var i = 0; i < Ptags.length; i++){if(pTags[i] == "text i want; theTextIwant = pTags[i]; )}

好的，所以我花了最后一天的时间，但看起来最简单，最万无一失的事情是：

var bodyElements = doc.querySelectorAll("p");
//Find the last non-empty element
//TODO: Go back and try another element if all elements of the specified type are empty
var i = bodyElements.length;
var newBodyValue = "";
while (!(/'S/).test(newBodyValue) || i < 0) {
    i--;
    try {
        newBodyValue = bodyElements[i].innerText;
        if (!newBodyValue) {continue;}
    } catch (err) {
        continue;
    }
}
最后一个

子选择器不起作用，因为我需要最后一个非空元素周期，而不仅仅是每个层次结构的最后一个。我后来了解到我可以很容易地使用JQuery，但我试图保持它的纯净，以保持Sharepoint开销最小。

我不得不添加一堆额外的东西，但这是最终的CSR JSLink结果。它采用标准的 SharePoint 任务列表并修改说明字段，以便它仅显示输入的最后一行。这对于我希望信息尽可能紧凑的特定摘要视图很有用。

https://gist.github.com/JustinGrote/4fd3b5e7bf0420c283a9

感谢大家的建议。

我知道我可能没有在很多东西上遵循最佳实践，但我总共只使用 Javascript 大约 10 个小时，所以起诉我:)

相关文章：