使用JavaScript替换HTML部分

Question

使用JavaScript替换HTML部分

5

我有一个问题：我需要用所需的html替换页面上的某些单词。例如：

t = $('body').html();
t = t.replace(/Myword/g, '<div></div>');
$('body').html(t);

它已经成功运行了。但是...如果正文包含javascript标记- JS会再次运行。

如果我使用document.body - 它会工作。

t = document.body.innerHTML;
t = t.replace(/Myword/g, '<div></div>');
document.body.innerHTML = t;

但我对jQuery的解决方案很感兴趣。也许你有这个吗？

提前感谢。

- indapublic

5

不必修改整个页面的HTML，你只需要针对具有指定文本的特定元素进行修改。 - Arun P Johny

@ArunPJohny，你能提供一个例子吗？ - Jenson M John

请分享您的HTML示例和文本出现的位置。 - Arun P Johny

@ArunPJohny 这可以是纯文本。类似于'<div><form>...</form>...很多很多的文本...<div>...</div>我的话</div>' - indapublic

4个回答

1

这个解决方案可能会对你有帮助。

如果出现以下情况，JavaScript 将不会被执行：

<script type=”text/xml”> 内部的 JavaScript 不会被执行
<script type=”text/xml” type=”text/javascript”> 内部的 JavaScript 也不会被执行，因为只有第一个类型会被认为是有效的

所以需要更改类型：

function preventJS(html) {
     return html.replace(/<script(?=(\s|>))/i, '<script type="text/xml" ');
}

并使用它：

t = $('body').html();
t = t.replace(/Myword/g, '<div></div>');
$('body').html(preventJS(t));

- Zaheer Ahmed

我认为你正在尝试在文本中放置<tag>，但它被解释并从视图中隐藏，因此你的第一个项目符号不清楚。尝试在标签周围放置反引号。 - AnalogWeapon

嗯，我需要检查一下。非常感谢。 - indapublic

1

正如Arun在评论中提到的那样，您应该更具体地针对元素。如果您使用JQuery获取整个内容然后重新插入它，

- AnalogWeapon

你可能需要重新表达一下，以明确捕获整个<body>内容是一个要求。 - AnalogWeapon

这个SO问题正在询问同样的事情，他们在那里讨论一些其他选项。祝你好运！ - AnalogWeapon

1

更好的方式是在最具体的元素中仅替换"Myword"。这只会替换包含它的textNode，而不会影响其他地方。

var each = Array.prototype.forEach;

var $myword = $(":contains('Myword')");
$myword.each(function() {
    each.call(this.childNodes, function(ele) {
        if(ele.nodeType === 3 && ele.nodeValue.indexOf('Myword') >= 0) {//if ele is a text node and contains myword
            ele.nodeValue = ele.nodeValue.replace(/Myword/g, "some text");
        } 
    }, this);
});

尝试在此页面上运行它

- megawac

但如果我有两个或更多具有“ Myword”属性的div-它只会替换一个（最后一个）出现。 - indapublic

是的，我提到过 - 如果您想要的话，可以使用过滤器来纠正它。 - megawac

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Aneesh Dogra · Accepted Answer

一个简单的解决方案是忽略所有的脚本标签。

t = $('body').clone().find("script").remove().end().html();
t = t.replace(/Myword/g, '<div></div>');
$('body').html(t);

Demo