时间戳

首页 > 解决方案 > 如何使用 document.body.innerHTML 仅获取不包含 js 代码的 html 内容？

javascript - 如何使用 document.body.innerHTML 仅获取不包含 js 代码的 html 内容？

问题描述

div#html,div#css,div#js,div#run{
    border:1px solid red;
    height:80px;
    width:80px;
    float:left;
}
div#content{
    clear:both;
    width:400px;
    height:200px;
    border:1px solid black;
}
textarea{
    overflow:auto;
}
<div id='html'>html</div>
<div id='css'>css</div>
<div id='js'>js</div>
<div id='run'>run</div>
<div id='content'>
</div>

现在我只想获取 html 内容。

变种内容=document.body.innerHTML; 警报（内容）

该alert网页将显示添加我的 js 代码的 html 内容

在此处输入图像描述

如何只获取不包含 js 代码的 html 内容？

为什么不能用 str.replace 得到它？

var content=document.body.innerHTML;
var reg = new RegExp('<script type="text/javascript">.+</script>');
var onlyHtml = content.replace(reg,"");
alert(onlyHtml);

整个 html 文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type='text/css'>
    div#html,div#css,div#js,div#run{
        border:1px solid red;
        height:80px;
        width:80px;
        float:left;
    }
    div#content{
        clear:both;
        width:400px;
        height:200px;
        border:1px solid black;
    }
    textarea{
        overflow:auto;
    }
   </style>
</head>
<body>
    <div id='html'>html</div>
    <div id='css'>css</div>
    <div id='js'>js</div>
    <div id='run'>run</div>
    <div id='content'>
    </div>        
    <script type='text/javascript'>
    var content=document.body.innerHTML;
    var reg = new RegExp("<script type='text/javascript'>.+</script>");
    var onlyHtml = content.replace(reg,"");
    alert(onlyHtml);
    </script>    
</body>
</html>

为什么不能只提取带有正则表达式的html？
验证我的正则表达式：

var content = "<p>test</p><script type='text/javascript'>somany lines and \
              so many lines</script>"
var reg = new RegExp("<script type='text/javascript'>.+</script>");
var onlyHtml = content.replace(reg,"");
alert(onlyHtml);

它得到：

<p>test</p>

标签： javascripthtml

解决方案

innerText将仅返回文本数据。因此，您可以使用document.body.innerText.

const content = document.body.innerText;
alert(content);
div#html,div#css,div#js,div#run{
    border:1px solid red;
    height:80px;
    width:80px;
    float:left;
}
div#content{
    clear:both;
    width:400px;
    height:200px;
    border:1px solid black;
}
textarea{
    overflow:auto;
}
<div id='html'>html</div>
<div id='css'>css</div>
<div id='js'>js</div>
<div id='run'>run</div>
<div id='content'>
</div>

推荐阅读