【Web前端】HTML 转换为纯文本

Cimoon_

已于 2023-05-26 01:57:07 修改

阅读量1.4k

点赞数

分类专栏： Web前端文章标签：前端 html javascript

于 2023-05-08 00:10:30 首次发布

本文链接：https://blog.csdn.net/Dawson_Ho/article/details/130550426

版权

Web前端专栏收录该内容

26 篇文章 6 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

输入 HTML 代码并将其转换为纯文本。

代码包含一个文本输入框，一个将输入的 HTML 代码转换为纯文本的按钮，以及一个用于显示转换后纯文本的 div 元素。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Convert HTML to Plain Text</title>
  <script>
function convertHtmlToPlainText() {
  var htmlString = document.getElementById('html-input').value;

  // 创建一个虚拟的DOM元素，用于解析HTML字符串
  var tempElement = document.createElement('div');
  tempElement.innerHTML = htmlString;

  // 递归遍历DOM树，提取文本和样式信息
  var plainText = '';
  var stack = [];

  function traverse(node) {
    if (node.nodeType === Node.ELEMENT_NODE) {
      var tagName = node.tagName.toLowerCase();
      var style = node.getAttribute('style') || '';
      var cssText = '';
      if (style) {
        cssText = ' style="' + style + '"'