Question

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

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>

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

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

Answer 1

不要尝试使用正则表达式，您应该使用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);
}

Answer 2

对于这种事情，jQuery支付红利，真的很快。

执行您想要的代码只是：

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

或者，如果你想更具体：

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

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

有关如何在用户脚本中包含jQuery的信息，see this answer for a cross-browser approach.

Documentation on the .replaceWith() function.

Userscript，如何替换HTML标记和属性

2 个答案: