在Javascript中交换图像的文本

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

我的问题是，我不知道内容是什么也因为它是内容是其它地方进行编辑动态页面和网站只是拉它在这样引用class和id是困难的。

我创建了一个简单的例子，其文字可能与内容相似，但是我遇到的问题是我的脚本将替换整个文档（我相信是因为.html？），我只是希望它替换特定的文本片段。

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


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

难道有人指着我正确的方向吗？

在此先感谢

来源

2015-12-10 scottdavidwalker

'x.html（x.html（）代替（ '喜'， ''））;' – sed

谢谢!!!!!!!!!!! – scottdavidwalker

你可能想要做一些正则表达式来确保你替换的“hi”不在标签中。如果你不可以与“ dden“/>最终这不会在大多数浏览器正确地呈现 – ghangas

您需要更换原来的HTML像这样x.html(x.html().replace('hi', '<img src="/Content/by_car.jpg" />'));

而且，这将是坏的，如果，例如，你将有<p class="hiblo">hi</p>。在这个canse中，它将取代hiblo和hi中的hip标记，从而破坏您的标记。

一般来说，你可以使用某种类型的正则表达式，但它仍然不推荐使用正则表达式来解析HTML。

来源

2015-12-10 11:25:25 sed

感谢建议，实际交换图像将使用非常具体的代码，而不是通用的单词，如“嗨”，我只是想举一个简单的例子:-) 感谢您的解决方案，虽然:-) – scottdavidwalker

这是工作代码。

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

<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>

来源

2015-12-10 11:33:14

在Javascript中交换图像的文本

回答

相关问题