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

我正在尝试更改HTML标记并删除标记后的class/style属性。 如果我事先创建代码并进行替换，我已经知道如何做到这一点，现在我想知道如何在已经加载的页面上找到标记并用我的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>");

var s=“Blog Post”；
s=s。替换（“，””）；
s=s.replace（//g，“
”）；

从

博客帖子

以

博客帖子

因此，问题是如何使用现有HTML创建

var s

？ 如何在页面上找到

h2.title

，并将其交给

var s

编辑除了我找到并调整的这个脚本之外，我没有任何javascript经验。

---

请解释如何从现有文档中获取文本，并使其成为s.replace操作的var

不要尝试使用正则表达式，应该使用DOM操作将相关文本节点移动到您创建的

p

标记。这里有一些代码可以满足您的需要

如果您想违背其他人的建议，这里有一种使用RegExp实现所需功能的方法

它使用了一个不太受支持的功能，

outerHTML

（它在最新版本的主流浏览器中也能工作）

---

不要尝试使用正则表达式，应该使用DOM操纵将相关文本节点移动到您创建的

p

标记。这里有一些代码可以满足您的需要

如果您想违背其他人的建议，这里有一种使用RegExp实现所需功能的方法

它使用了一个不太受支持的功能，

outerHTML

（它在最新版本的主流浏览器中也能工作）

对于这种事情，支付红利，真的很快就好了

执行所需操作的代码如下：

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

$（“h2”）.replacetwith（函数（）{
返回“”+this.textContent+”
”；
} );

或者，如果您想更具体一些：

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

$（“h2.title”）.replacetwith（函数（）{
返回“”+this.textContent+”
”；
} );

请注意，该代码修复了所有

元素（第一个块），或者仅修复了所有

元素的类

标题（第二个块）


有关如何在用户脚本中包含jQuery的信息

对于这类事情，支付股息，非常迅速

执行所需操作的代码如下：

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

$（“h2”）.replacetwith（函数（）{
返回“”+this.textContent+”
”；
} );



或者，如果您想更具体一些：

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

$（“h2.title”）.replacetwith（函数（）{
返回“”+this.textContent+”
”；
} );



请注意，该代码修复了所有
元素（第一个块），或者仅修复了所有
元素的类
标题（第二个块）


有关如何在用户脚本中包含jQuery的信息

是否只想更改HTML本身？从
Blog Post
到
Blog Post
您不应该使用正则表达式解析HTML，获取标记/类名，并相应地用DOM方法替换它。@juan mendes是的，我正试图操作代码，就像我文章中的开始和结束示例一样。javascript已经做到了这一点，我的代码正是我想要的，但只有当我创建了var s，我希望var s是动态的，我希望var s找到
blog post 1
，然后运行
s.replace
@RzK很难说出
希望var s是动态的是什么意思，我希望var s找到blog post 1，然后运行s.replace
，但有两件事是肯定的：您的regexp将非常脆弱；此外，您不能只期望调用
String.replace（）
来更新DOM，您必须设置父节点的
innerHTML
（假设它是唯一的子节点）@Rzk您走错了路。为什么你不断更新你的问题，要求我们教你做一些不可取的事情
h2.title
不是一个字符串，您不能对它调用
.replace（）
，您只想更改HTML本身吗？从
Blog Post
到
Blog Post
您不应该使用正则表达式解析HTML，获取标记/类名，并相应地用DOM方法替换它。@juan mendes是的，我正试图操作代码，就像我文章中的开始和结束示例一样。javascript已经做到了这一点，我的代码正是我想要的，但只有当我创建了var s，我希望var s是动态的，我希望var s找到
blog post 1
，然后运行
s.replace
@RzK很难说出
希望var s是动态的是什么意思，我希望var s找到blog post 1，然后运行s.replace
，但有两件事是肯定的：您的regexp将非常脆弱；此外，您不能只期望调用
String.replace（）
来更新DOM，您必须设置父节点的
innerHTML
（假设它是唯一的子节点）@Rzk您走错了路。为什么你不断更新你的问题，要求我们教你做一些不可取的事情
h2.title
不是一个字符串，你不能在itAwesome上调用
.replace（）
，它工作得很好。我怎样才能循环所有h2元素的更改？感谢you@Rzk这里有一个线索，使用
document.querySelectorAll
返回所有h2元素。但是请不要使用
RegExp
s，这是自讨苦吃，请使用第一个示例（并接受答案）。谢谢您的帮助，但是document.queryselector在使用RegExp或DOM操作时不返回任何元素。@Rzk您所说的毫无意义。我试图选择页面上的所有h2元素，使用document.querySelectorAll。在两个答案中都使用document.queryselectoral
$("h2.title").replaceWith ( function () {
    return '<p>' + this.textContent + '</p>';
} );