1

我正在尝试更改 HTML 标记并删除标记后的类/样式属性。如果我事先创建代码并替换，我已经知道如何做到这一点，现在我想知道如何在已经加载的页面上找到标签并用我的 js 替换它们。

var s = "<h2 class=\"title\" style=\"font-color: red;\">Blog Post</h2>";
s = s.replace("<h2 class=\"title\" style=\"font-color: red;\">","<p>");
s = s.replace(/<\/h2>/g, "</p>");

从...开始 <h2 class="title" style="font-color: red;">Blog Post</h2>

结束于 <p>Blog Post</p>

所以问题是如何var s使用现有的 HTML 创建？如何h2.title在页面上找到并将其提供给var s？

编辑除了我找到并调整的这个脚本之外，我没有任何 javascript 经验。请解释我如何从现有文档中获取文本，并使其成为 s.replace 操作的 var。

4

2 回答 2

2

不要试图用正则表达式来做，你应该使用 DOM 操作将有问题的文本节点移动到p你创建的标签。这里有一些代码可以满足您的需要。

http://jsfiddle.net/jWRh5/

// Find the h2
var h2 = document.querySelector("h2");
// Create the p element you need
var p = document.createElement("p");
// Move the text node into the p element
p.appendChild(h2.firstChild);
// Insert the p element before the h2
h2.parentNode.insertBefore(p, h2);
// Get rid of the h2
h2.parentNode.removeChild(h2);

如果你想违背其他人的建议，这里有一种使用 RegExp 来实现你需要的方法http://jsfiddle.net/jWRh5/1/

它使用了一个不太受支持的功能，outerHTML（它在主要浏览器的最新版本中工作）

var h2 = document.querySelector("h2.title");
var s = h2.outerHTML;
s = s.replace("<h2 class=\"title\" style=\"font-color: red;\">","<p>");
s = s.replace(/<\/h2>/g, "</p>");
h2.outerHTML = s;

以下是如何为页面上的所有 h2.titles 执行此操作（不使用 RegExp 方式，因为这是一种非常糟糕的方式，但如果您真的打算使用它，您可以将其用作指南）

var h2s = document.querySelectorAll("h2.title");
// Loop backwards since we're modifying the list
for (var i = h2s.length -1 ; i >=0; i--) {
    var h2 = h2s[i];
    var p = document.createElement("p");
    p.appendChild(h2.firstChild);
    h2.parentNode.insertBefore(p, h2);
    h2.parentNode.removeChild(h2);
}
于 2012-11-28T00:50:42.090 回答
1

对于这种事情，jQuery付出了红利，真正的快速。

做你想做的代码就是：

$("h2").replaceWith ( function () {
    return '<p>' + this.textContent + '</p>';
} );


或者，如果您想更具体：

$("h2.title").replaceWith ( function () {
    return '<p>' + this.textContent + '</p>';
} );


请注意，该代码修复了所有元素<h2>（第一个块），或者只是所有<h2>具有类的元素title（第二个块）。

有关如何在用户脚本中包含 jQuery 的信息，请参阅此答案以了解跨浏览器方法。

.replaceWith()关于函数的文档。

于 2012-11-28T01:34:11.187 回答