Question

我正在寻找一种方法，我可以搜索整个HTML文档中的特定单词，然后将该单词的每个实例与图像交换。

我遇到的问题是我不知道那里有什么内容，因为它是一个动态页面，其中的内容在其他地方被编辑，而网站只是将其拉入，因此很难引用类和ID。

我创建了一个简单的示例，文本可能类似于内容，但我遇到的问题是我的脚本将替换整个文档（我相信因为.html？）而我只是想让它替换那段特定的文本。

<p>hi</p>
<p>j</p>


var x = $('body:contains("hi")');
        x.html('<img src="/Content/by_car.jpg" />');

有人能指出我正确的方向吗？

提前致谢

Answer 1

您需要替换原来的html，如x.html(x.html().replace('hi', '<img src="/Content/by_car.jpg" />'));

此外，如果您有<p class="hiblo">hi</p>，这将是不好的。在此canse中，它会替换hi中的hiblo和hi内的p标记，从而破坏您的标记。

通常你可以使用某种正则表达式，但仍然不建议用正则表达式解析html。

Answer 2

这是工作代码。

此代码还确保脚本和样式标记不会被替换，否则页面逻辑将被破坏。所以它也得到了照顾。

<html>
<head>
    <script type="text/javascript" src="jquery-1.11.3.min.js" > </script>
    <style></style>
</head>
<body>
    <h1>hi</h1>
    <div>hi</div>

    <input type="button" onclick="return replaceWithImage()" value="replace with image"/>

    <script type="text/javascript">

        function replaceWithImage() {
            var x = $('body').find(':contains("hi")');

            x.each(function(){
                if($(this).prop('tagName') != 'SCRIPT' && $(this).prop('tagName') != 'STYLE')
                    $(this).replaceWith('<img src="/Content/by_car.jpg" />');



            });

            return false;

        }


    </script>

</body>
</html>

在Javascript中交换图像的文本

2 个答案: