如何仅从 html 标签获取文本

Question

我查询了一些数据，结果是这样的

<p><img src="xxx.png" alt="" style="margin&#58;5px;" /><br></p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br></p>

在控制台上显示。我想从此数据中删除所有 html 标记，只获取这样的字符串

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type.

任何人都知道如何从此数据或某些解决方案中删除单引号和双引号。谢谢

Answer 1

console.log($('p').text())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><img src="xxx.png" alt="" style="margin&#58;5px;" /><br></p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br></p>

使用.text()仅获取文本

Answer 2

您可以创建一个临时元素并读取它的 .textContent 属性:

var d = document.createElement('div');
d.innerHTML = htmlContent;
var textContent = d.textContent || d.innerText;

如果可以使用jQuery:

var textContent = $('<div/>').html(htmlContent).text();

Answer 3

使用innerHTML

即可获得

在你的JavaScript中做

var a = document.getElementById("para") //Let us say your paragraph id is "para"

var b - a.innerHTML;

现在 b 将包含段落中的字符串。

var a = document.getElementById("para");

var b = a.innerHTML;
alert(b);

<p><img src="xxx.png" alt="" style="margin&#58;5px;"/><br></p> 
<p id = "para">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br></p>

您还可以阅读 innerHTML 的 Mozilla 文档。

我还发现了这个很棒的 Guide，它也能在未来帮助你，它解释了 innerHTML、innerText 和 textcontent 之间的区别。

也看看这个问题Get innerHtml but remove unwanted tags

Answer 4

使用正则表达式

function RemoveHTMLTags(html) {
  var regX = /(<([^>]+)>)/ig;                
  alert(html.replace(regX, ""));
}

Answer 5

function getTextOnly(){
  var pTag = document.getElementById("page");
  textOnly = pTag.innerHTML;
  textOnly = textOnly.replace("<br>"," ");
  alert(textOnly);
}

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <p><img src="xxx.png" alt="" style="margin&#58;5px;" /><br></p><p id="page">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br></p>

    <button onclick="getTextOnly()" >Show Text</button>
  </body>
</html>

这个怎么样？如果你只想获取 <p> 标签内的文本，你应该为这个 <p> 标签设置 id。只是建议。

Answer 6

您需要考虑一些事项， a) 是否要获取特定类型的所有DOM个元素的文本。

如果这样做，请使用以下内容：

<div>
  A lot of content here
</div>

var data = $('div');
console.log(data.innerHTML);

否则，将 class 或 id 分别添加到您需要其数据的 element/elements，然后使用上面的代码，但将 "div" 替换为您的 class/id。

Answer 7

只需附加并尝试这个简单的 jQuery

<div id="output"><div>

<Script type="text/javascript">
  $("#output").html($("p").text());
</script>

Answer 8

jQuery 方式和香草 Javascript 方式也在这个例子中：

//jQuery way:
console.log($('p').text())

// OR can be using vanilla JS:
let para = document.getElementsByTagName('p'); // this can be also by getElementById()

console.log(para[1].innerText);// we are using [1] because we have two <p> tags

<p><img src="xxx.png" alt="" style="margin&#58;5px;" /><br></p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br></p>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

如何仅从 html 标签获取文本

How to get only text from html tag

javascript

string

jquery

text

gettext