Javascript 仅包含来自页面源的标记
我有一个字符串,比如headData,它是、和标记的组合。对于带有虚拟数据的Extrade-Javascript 仅包含来自页面源的标记,javascript,html,reactjs,styles,script-tag,Javascript,Html,Reactjs,Styles,Script Tag,我有一个字符串,比如headData,它是、和标记的组合。对于带有虚拟数据的Extrade- let headData = '<style> @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; src: local('Roboto Light'), local('Roboto-L
let headData = '<style>
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(path-to.woff) format('woff');
}</style>
<link rel="dns-prefetch" href="//assets.adobedtm.com">
<script>var isPresent = false;</script>
<script>var isContent = true;</script>
<style>@font-face {
font-family: 'Courgette';
font-style: normal;
font-weight: 400;
src: local('Courgette Regular'), local('Courgette-Regular'), url(path-to.woff2) format('woff2');}</style>'
我将整个headData注入如下标记中
<script dangerouslySetInnerHTML={{__html: headData}} />
我不想注入HTML标记,比如与标记相关的数据,只希望注入所有与标记相关的数据。是否有一种方法可以使用只选择标记的正则表达式来实现这一点
所以我最后想要注入的类似于-
let headData = '<script>var isPresent = false;</script>
<script>var isContent = true;</script>'
在Javascript中实现这一点的正确方法是什么?您可以通过正则表达式捕获组找到想要的标记并匹配: 演示: 让headData=` @字体{ 字体系列:“Roboto”; 字体风格:普通; 字体大小:300; src:local'Roboto-Light',local'Roboto-Light',urlpath-to.woff格式'woff'; } var isPresent=false; var isContent=true; @字体{ 字体系列:“小胡瓜”; 字体风格:普通; 字体大小:400; src:local'Courgette-Regular',local'Courgette-Regular',urlpath-to.woff2格式'woff2';}`; var re=/[^]*/g; headData=headData.matchre.join'\n'; console.logheadData;
我不熟悉React,但通常使用正则表达式解析HTML不是一个好主意 正则表达式可能会遇到各种各样的问题。例如,一些脚本标记可能包含如下代码:constmystring= 我建议使用浏览器的内置解析器而不是正则表达式来提取脚本标记及其内容
function getScriptsString(headString) {
const head = document.createElement('head');
head.innerHTML = headData;
const headChildrenArray = Array.from(head.children);
const scriptsString = headChildrenArray.reduce((str,el) => {
if(el.tagName === 'SCRIPT') {
return str + el.outerHTML;
}
return str;
}, '');
return scriptsString;
}
你想把javascript放在脚本标签中还是执行它呢?它会被执行,这只是我在问题中提供的一个虚拟,实际上,我会让GTM和Adobe脚本被执行。我只想过滤掉HTML标记,只包含标记我认为过滤是可能的,但我不确定它是否会作为内联脚本执行。。。由于所有内联脚本在加载时只执行一次,因此如何可能实现过滤。我相信它会被执行的。你可以看到我发布的一个类似的问题,它运行良好。我已经发布了过滤脚本的代码,检查它是否适合你。谢谢你的更新。是否有一种方法,我们只能检查是否包含标记,而不是排除其他标记。因为我需要的是只包含脚本tag@ShantanuTomar,我已经更新了答案,请检查:有,但只提取了第一个标记数据,包括开始和结束脚本标记,然后停止。@Shantautomar,我不知道为什么会出现一次,我在FireFox和Chrome中进行了测试,并按预期获得了两次:
function getScriptsString(headString) {
const head = document.createElement('head');
head.innerHTML = headData;
const headChildrenArray = Array.from(head.children);
const scriptsString = headChildrenArray.reduce((str,el) => {
if(el.tagName === 'SCRIPT') {
return str + el.outerHTML;
}
return str;
}, '');
return scriptsString;
}