用javascript替换html部分答案

【问题标题】：Replace html part by javascript用javascript替换html部分
【发布时间】：2014-01-04 08:04:30
【问题描述】：

我有问题：我需要用所需的 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 解决方案很感兴趣。也许你有它？

提前致谢

【问题讨论】：

而不是修改整个页面的html，你只需要定位那些带有给定文本的特定元素
@ArunPJohny 你能举个例子吗？
请分享您的 html 示例以及文本可以出现的位置
@ArunPJohny 可以是纯文本。类似 '

...
...Many many text...
...
Myword

标签： javascript jquery html

【解决方案1】：

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

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

Demo

【讨论】：

我想在第 3 方页面上使用我的脚本。我认为删除脚本不是个好主意。

【解决方案2】：

This solution might help you.

如果发生以下情况，则不执行 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));

【讨论】：

我认为您正试图将<tag> 放入您的文本中，并且它正在被解释并隐藏在视图中，因此您的第一个要点不清楚。尝试在标签周围放回刻度。
嗯。我需要检查一下。非常感谢

【解决方案3】：

正如 Arun 在 cmets 中提到的，您应该更具体地定位元素。如果您使用 JQuery 获取整个 <body> 内容然后重新插入，听起来 <script> 标签将被重新评估。尝试将所需内容包装在<div>：

<body>
    <div id="wrapper">
        <p>Text that will be altered</p>
    </div>
    <script type="text/javascript">
        //javascript code
    </script>
</body>

那么您将替换文本的代码可以是：

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

【讨论】：

您可能需要重新措辞以明确捕获<body> 的全部内容是一项要求。
This SO question 也在问同样的事情，他们正在那里讨论其他一些选择。祝你好运！

【解决方案4】：

更好的方法是在最具体的元素中替换"Myword"。这只会替换包含它的 textNodes 中的 Myword 而不会替换其他任何地方。

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);
});

尝试在此页面上运行它

【讨论】：

但是如果我有两个或更多带有“Myword”的 div - 它只替换一个（最后一个）出现
是的，我提到过——如果你愿意，你可以做一个过滤器来纠正它