14 html javascript jquery html-parsing html-parser
我可以使用开源(客户端)来扩展HTML,例如我需要添加脚本或更改一些src值并添加其他标签等.
我找到了以下内容:https://www.npmjs.com/package/gulp-html-extend
但我不确定我是否可以在客户端使用它(我们在项目中不使用gulp)客户端我的意思是例如在jsFiddle中使用它.
输入应该是HTML内容,其中一些object/json包含新内容,输出应该是扩展HTML.
如果没有开源,我需要自己开发,那么我应该从优秀的设计方面遵循一些指导方针吗？
更新:
例如,如果我将以下HTML文档作为JS输入变量
这是我作为STRING的输入
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>td</title>
<script id="test-ui-bootstrap"
src="resources/test-ui-core.js"
data-test-ui-libs="test.m"
data-test-ui-xx-bindingSyntax="complex"
data-test-ui-resourceroots='{"tdrun": "./"}'>
</script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script>
test.ui.get().attachInit(function() {
});
</script>
</head>
<body class="testUiBody" id="content">
</body>
</html>
例如,我需要以下内容:
我想在之后添加额外的脚本(例如内部警报)
<script id="test-ui-bootstrap" ....
如果文件脚本中有id "test-ui-bootstrap"
我想在此脚本后立即添加另一个脚本,例如
script with alert inside
在最后一个脚本之后在第一个脚本(id id ="test-ui-bootstrap")中添加其他属性...
data-test-ui-libs="test.m"
加上
data-test-ui-libs123 ="test.bbb"
如果我想修改现有属性的值,例如更改
src="resources/test-ui-core.js"
至
src="resources/aaaa/test-ui-core.js"
我得到的字符串使用HTML和我要与修改后的HTML创建新的字符串我,我可以这样做的权利与好方法？
更新2
这是HTML改变后的输出
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>td</title>
<script id="test-ui-bootstrap"
src="resources/aaaa/test-ui-core.js"
data-test-ui-libs="test.m"
data-test-ui-libs123 ="test.bbb"
data-test-ui-xx-bindingSyntax="complex"
data-test-ui-resourceroots='{"tdrun": "./"}'>
</script>
<script>
alert("test)
</script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script>
test.ui.get().attachInit(function() {
});
</script>
</head>
<body class="testUiBody" id="content">
</body>
</html>
您可以在DOM外部创建沙盒元素,然后将HTML插入其中.
var sandbox = document.createElement('div');
sandbox.innerHTML = yourHTMLString;
浏览器将解析您的HTML,然后您将能够使用DOM API遍历/修改它.
您可以使用它来查找元素和添加属性.
var script = sandbox.querySelectorAll('#test-ui-bootstrap');
script.setAttribute('data-test-ui-libs', 'test.m');
script.setAttribute('src', 'resources/aaaa/test-ui-core.js');
或者在现有元素之后插入新元素.
var newScript = document.createElement('script');
newScript.innerText = 'your script contents';
script.parentNode.insertBefore(newScript, script.nextSibling);
一旦你准备好再次使用它作为一个字符串,你可以把它作为一个属性读出来.
var html = sandbox.innerHTML;
注意.不同的浏览器以innerHTML不同的方式处理机制,您可能会发现在将HTML插入沙箱时它们会剥离<body>和<head>标记.
如果是这种情况,那么你可以用黑客来解决它.
var escapedTags = yourHTMLString
.replace(/body/ig, 'body$')
.replace(/head/ig, 'head$')
// now the browser won't recognize the tags
// and therefore won't strip them out.
sandbox.innerHTML = escapedTags;
// do some work
// ...
// don't forget to unescape them!
var unescapedTags = sandbox.innerHTML
.replace(/body\$/g, 'body')
.replace(/head\$/g, 'head');
这利用了浏览器无法理解什么<body$>是<head$>标签或标签的事实,因此它完好无损.
初始（Node.js）
我对你的问题的理解如下：你想在 Node.js 环境中解析 HTML 字符串（你提到了 Gulp），扩展它并获取结果字符串。
首先，您需要将字符串解析为一个结构，您可以在该结构上进行查询。有几个库可以实现这一点。Cheerio.js在StackOverflow 答案中得到推荐和解释。那里还解释了其他解决方案。然后，该库为您提供 HTML 代码的 DOM 接口。在 Cheerio.js 的示例中，您可以像在 jQuery 中一样访问 DOM。他们的 GitHub 页面的官方示例如下所示。以类似的方式，您可以通过选择元素并添加内容（修改它等）来执行逻辑。通过调用该$.html()函数，您可以恢复修改后的结构。
var cheerio = require('cheerio'),
$ = cheerio.load('<h2 class="title">Hello world</h2>');
$('h2.title').text('Hello there!');
$('h2').addClass('welcome');
$.html();
// => returns '<h2 class="title welcome">Hello there!</h2>'
如果您想在 Gulp 构建过程中使用此逻辑，则需要将其包装到 Gulp 插件中，并将 Cheerio.js 作为依赖项。在Gulp 的官方 GitHub 自述文件中，详细解释了如何创建 Gulp 插件。
编辑（浏览器）
根据您编辑的问题，我将添加有关在浏览器中编辑 HTML 的部分。
使用 jQuery 在浏览器中修改 DOM 非常方便。您还可以使用 jQuery 修改虚拟 DOM。为此，您只需要创建元素，而不是将其附加到真实的 DOM 中。不幸的是，浏览器在处理以下标签时表现特殊：<html>、<body>和。作为解决方法，您可以使用正则表达式编辑这些标签并将其重命名为类似的名称，依此类推。您需要有一个良好的正则表达式来仅匹配标签而不是像也包含单词 的内容。这里详细描述了特殊行为。<head><!DOCTYPE html><body_temp>class="testUiBody"body
以下代码在 HTML 中进行了所有所需的更改。您可以在更新的 JSFiddle中测试它。只需单击“提交”按钮，您就可以看到更改。上部textarea充当 HTML 输入，下部充当 HTML 输出。
var html = "<!DOCTYPE html><html><head><meta.....";
// replace html, head and body tag with html_temp, head_temp and body_temp
html = html.replace(/<!DOCTYPE HTML>/i, '<doctype></doctype>');
html = html.replace(/(<\/?(?:html)|<\/?(?:head)|<\/?(?:body))/ig, '$1_temp');
// wrap the dom into a <container>: the html() function returns only the contents of an element
html = "<container>"+html+"</container>";
// parse the HTML
var element = $(html);
// do your calculations on the parsed html
$("<script>alert(\"test\");<\/script>").insertAfter(element.find('#test-ui-bootstrap'));
element.find("#test-ui-bootstrap").attr('data-test-ui-libs123', "test.bbb");
element.find("#test-ui-bootstrap").attr('src', 'resources/aaaa/test-ui-core.js');
// reset the initial changes (_temp)
var extended_html = element.html();
extended_html = extended_html.replace(/<doctype><\/doctype>/, '<!DOCTYPE HTML>');
extended_html = extended_html.replace(/(<\/?html)_temp/ig, '$1');
extended_html = extended_html.replace(/(<\/?head)_temp/ig, '$1');
extended_html = extended_html.replace(/(<\/?body)_temp/ig, '$1');
// replace all " inside data-something=""
while(extended_html.match(/(<.*?\sdata.*?=".*?)(")(.*?".*?>)/g)) {
extended_html = extended_html.replace(/(<.*?\sdata.*?=".*?)(")(.*?".*?>)/g, "$1'$3");
}
// => extended_html contains now your edited HTML
| 归档时间： |
|
| 查看次数： |
2251 次 |
| 最近记录： |