替换javascript中html字符串的特定id标签的内容

Replacing the contents of a specific id tag of an html string in javascript

本文关键字：id 标签 html 字符串 替换 javascript      更新时间：2023-09-26

我有一个JS字符串像这样:

var html_string = "<h3 id='title'>ABC</h3><h5 id='subtitle'>XYZ</h5>";
然后将该字符串放入CodeMirror iframe中，使其可见。我想让用户改变标题和副标题在一个简单的方式与<input>字段。我如何使用id标签替换这些特定的文本?

例如，如果标题输入是"Hello"，副标题输入是"World"，当前字符串就像上面显示的那样，那么新字符串应该变成:

"<h3 id='title'>Hello</h3><h5 id='subtitle'>World</h5>"

我应该使用正则表达式吗?做这样事情的正则表达式的结构是什么?

注意，我不能简单地做一个replace("ABC", "Hello")，我需要根据标签的ID改变文本。

对于多个，可以使用class，而不是id

$("h3.title").each(function(index){
    if($(this).text()=="Hello"){
        $("h5.subtitle:eq("+index+")").replace("XYZ",$("input#ID").val());
    }
})

将HTML字符串呈现到页面后，使用标记的id替换文本，如下面的示例代码所示:

$('#title').html("Hello");
$('#subtitle').html("World");

或

如果您知道旧内容和新内容，则使用如下所示的替换函数

html_string .replace("ABC", "Hello");
html_string .replace("XYZ", "World");

是的，您应该使用正则表达式。假设html_string的结构是可预测的，就像在例子中(标题总是在<h3>，副标题总是在<h5>，没有额外的属性，总是使用单引号，等等)，你的代码可以像这样简单:

html_string = html_string.replace( /(<h3 id='title'>).*?(</h3>)/, "$1New Text$2" );
html_string = html_string.replace( /(<h5 id='subtitle'>).*?(</h5>)/, "$1New Text$2" );

如果title和subtitle的id可能位于不同的标签中，或者如果标签包含额外的属性，或者如果id可能位于双引号而不是单引号中，则需要修改正则表达式以查找和处理此类意外情况。

正则表达式不太适合解析复杂的HTML，但是对于您在这里列出的问题，它们是一个非常好的解决方案。

相关文章：